topic Re: Menu-item auto-close in Calcite Design System Questions

Menu-item auto-close

LefterisKoumis — Fri, 23 Aug 2024 19:58:30 GMT

After you click the calcite-menu/submenu item, provided there is no other submenu-item, the only way to close it, is to click anywhere else other than on the menu? Is it an industry standard after you click on a menu item to close itself?

@KittyHurley

Re: Menu-item auto-close

DitwanDPrice — Fri, 23 Aug 2024 20:06:24 GMT

Hey, do you happen to have a codepen or something that shows the behavior that you're describing?

Re: Menu-item auto-close

LefterisKoumis — Fri, 23 Aug 2024 20:15:28 GMT

Sure. ESRI's own example. I forked it.

https://codepen.io/lkoumis1/pen/zYVjpKN?editors=1000

Just click for example, the East and then SouthEast. You expect that after you click the SouthEast you will close the menu, instead it will stay open. Also, is there a way to reduce the spacing between the items. See my screenshot, it take a lot of space. What is the css for this. Thank you.

Re: Menu-item auto-close

DitwanDPrice — Fri, 23 Aug 2024 21:00:42 GMT

Thank you, You are indeed correct that the menu not closing is an unintended behavior, and I'll be logging an issue to ensure it's addressed in a future release.

Regarding the spacing between menu items, this is not currently customizable, and there are no immediate plans to introduce this functionality. However, I will bring this up with the team for further discussion to see if we can consider it for a future update.

Re: Menu-item auto-close

LefterisKoumis — Fri, 23 Aug 2024 21:22:57 GMT

Thank you.

Can you please provide me the link for this issue, so I can follow the discussion. Thank you. https://github.com/Esri/calcite-design-system/issues

Re: Menu-item auto-close

DitwanDPrice — Fri, 23 Aug 2024 21:33:17 GMT

Definitely, here you go! https://github.com/Esri/calcite-design-system/issues/10153

Re: Menu-item auto-close

DitwanDPrice — Mon, 26 Aug 2024 21:59:18 GMT

@LefterisKoumis

Here's a temporary workaround you can use. In the CodePen example, the workaround is applied only to the leaf menu items under 'West.'

To implement this, you'll need the JavaScript code and to add the (data-menu-item="close-on-select") attribute to the menu items you want to trigger the auto-close behavior.

Re: Menu-item auto-close

LefterisKoumis — Mon, 26 Aug 2024 23:54:02 GMT

Great. Thank you. Nice way to address the issue, temporarily, correct? So, there is no way through the use of css to adjust the spacing between the menu items? I have 12 items and it occupies 70% of the screen! Ridiculous.