Select to view content in your preferred language

Menu-item auto-close

221
7
4 weeks ago
LefterisKoumis
Frequent Contributor

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 

0 Kudos
7 Replies
DitwanDPrice
Esri Contributor

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

0 Kudos
LefterisKoumis
Frequent Contributor

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.

LefterisKoumis_0-1724444079355.png

 

0 Kudos
DitwanDPrice
Esri Contributor

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.

0 Kudos
LefterisKoumis
Frequent Contributor

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

0 Kudos
DitwanDPrice
Esri Contributor
0 Kudos
DitwanDPrice
Esri Contributor

@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.

0 Kudos
LefterisKoumis
Frequent Contributor

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.

0 Kudos