Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Make MenuComponent not hide on outside click


Hi there!

I am trying to make a dropdown menu not hide when outside click occurs. I am using React and based on the HTML documentation I have tried:

data-kt-menu-permanent='true'
data-kt-menu-static='true'

Both on the button and the menu div itself. It is not working. Can you let me know how to do this?

Thanks,
Tamas


T
Tamas 3 years ago
React
2 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

T
Tamas 3 years ago

Thanks Lauris,

That fixed the issue.

Best wishes,
Tamas


user
Lauris Stepanovs Author 3 years ago

Hi Tamas,

Thank you for your message, good catch.

I've added the bug ticket to our development backlog, we will fix it in the next release.

For now, as a temporary solution, you can update line 991 in file src/assets/ts/components/MenuComponent.ts.

From

const menuItems = document.querySelectorAll(".show.menu-dropdown[data-kt-menu-trigger]")

to

var menuItems = document.querySelectorAll(".show.menu-dropdown[data-kt-menu-trigger]:not([data-kt-menu-static="true"])");


Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(