[menu, menu-item] menu should close after clicking on a menu-item nested items

[DitwanP]

Check existing issues

• [x] I have checked for existing issues to avoid duplicates

Actual Behavior

Currently when you click on a menu-item that does not have any nested menu-items the menu stays open until you click outside of the menu.

Expected Behavior

Once an item has been selected from the menu, the menu should automatically close.

Reproduction Sample

https://developers.arcgis.com/calcite-design-system/components/menu/#usage

Reproduction Steps

1. Open the link to the menu page on our doc site
2. Change the sample to be "Menu - with Submenus"
3. Click on the "East" item to open the menu
4. Click on the "Southeast" item
5. Notice the menu stays open

Reproduction Version

2.11.1

Relevant Info

Surfaced on Esri Community on August 23, 2024

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Impact

No response

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [ ] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

N/A

[macandcheese]

We might want to leave this up to the developer? There could be cases where the menu would not be meant to close (or the "vertical" layouts) - this could potentially be an option like in Dropdown with closeOnClick type of prop?

[lkoumis]

We might want to leave this up to the developer? There could be cases where the menu would not be meant to close (or the "vertical" layouts) - this could potentially be an option like in Dropdown with closeOnClick type of prop?

I thought the menu was introduced to use it in navigation headers. Therefore, the default behavior for a menu item is to close once it is selected.

[geospatialem]

Using JavaScript the above can be achieved with data attributes: https://codepen.io/Ditwan-Price/pen/YzovYQe