Adding actions (edit, remove, etc.) inside SegmentedControl causes nested <button> warning

[Sourour18]

When trying to add an ActionMenu inside a SegmentedControl item to provide actions like edit, remove, or close, I get the following warning:

In HTML, <button> cannot be a descendant of <button>.
This will cause a hydration error.

Is there a supported way to add an ActionMenu or similar action triggers (edit, remove, etc.) inside a SegmentedControlItem?
If not, could it be possible to expose a slot or render prop that allows embedding non-button actions safely within the item?

Thank you.

[reidbarber]

For React Spectrum's SegmentedControl, this isn't supported be supported. I recommend putting them next to each other.

If you wanted to build something custom with React Aria, you'd still need to have the components be adjacent but style them to be connected to each other.

[Sourour18]

Ok, thanks.
I can’t place them next to each other because I need an ActionMenu (or ActionButtonGroup, etc.) inside each SegmentedControlItem, like this:

Each item has its own contextual actions (e.g., edit, remove, duplicate), so the menu needs to be part of the item itself.

[reidbarber]

Ahh, I see. This is difficult because the SegmentedControl uses React Aria's ToggleButtonGroup to handle keyboard navigation between items. Placing ActionMenus between those items would disrupt the keyboard flow. If you remove the ToggleButtonGroup and just have [ToggleButton, ActionMenu, ToggleButton, ActionMenu...] then you lose out on the ToggleButtonGroup benefits (selection state, arrow key navigation, etc.). I think that is probably the best way to achieve this design and stay accessible though.