The New Way to Build! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Learn More

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


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 (3)

One of the most satisfying moments in heardle occurs when a player recognizes a song almost instantly. Hearing a familiar beat, guitar riff, or vocal introduction can create an immediate sense of confidence. Successfully identifying a track after only one or two seconds of audio feels rewarding because it demonstrates strong musical awareness and familiarity with the song.


Thanks Lauris,

That fixed the issue.

Best wishes,
Tamas



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  :(