Pass `id` prop to the menu item's DOM element

[damianstasik]

Provide a general summary of the feature here

Could you please consider adding a way to set an id attribute on the DOM element rendered by menu items?

🤔 Expected Behavior?

Currently, when you pass an id to MenuItem, it is not applied to the DOM element that the menu item renders. This is similar to the behavior of the Menu component, which accepts an id but does not use it as expected.

😯 Current Behavior

The id prop is filtered out of the DOM props and instead, the value from the custom useId hook is used.

💁 Possible Solution

From what I've seen, the current logic filters out the id prop due to special handling of the submenu triggers. A naive fix would be to fall back to user-provided ID if none is provided by the MenuItemContext:

react-spectrum/packages/react-aria-components/src/Menu.tsx

Line 369 in 4b2c6e7

id,

  let {menuItemProps, labelProps, descriptionProps, keyboardShortcutProps, ...states} = useMenuItem({
    ...props,
-   id,
+   id: id ?? props.id,
    key: item.key,
    selectionManager
  }, state, ref);

🔦 Context

What are you trying to accomplish?

I was testing the Autocomplete component and needed to determine which menu item had virtual focus through AutocompleteStateContext. Unfortunately, the focusedNodeId property doesn't point to my provided id on the menu item, but instead to the internally generated one from useId.

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

The unfortunate thing about this is that we use id as a way to identify each collection item from one another, so the id you provide to the MenuItem will not be used as the DOM id (see https://github.com/adobe/react-spectrum/blob/main/rfcs/2023-react-aria-components.md#collections). It doesn't look like props.id even comes through to the MenuItem if provided, and even if it did we'd probably opt for a separate prop name than reuse id. I'll bring it up with the team if we want to expose a way to set the DOM id here.

Could you expand a bit on the use case you described with Autocomplete? What were you trying to accomplish with knowing with item has virtual focus?

[nwidynski]

@LFDanLu I will try to tackle this issue while working on #7240 👍 I don't think introducing another prop for this is the right way to go - instead we should try to remove id from useMenuItem() entirely, since i understand it to be misleading.

I will try to implement a way to streamline how collection nodes generate their id attribute, which will make ids predictable from a parent component. This will hopefully address use cases like this and others.