Column pickers: clicking label toggles wrong grid

[Olga97]

What you were expecting:

When a page has more than one column-visibility UI (for example a main DataTable with ColumnsButton and a nested DatagridConfigurable with SelectColumnsButton), clicking the text label next to a switch in the inner picker should show/hide columns for that inner grid only—the same as clicking the switch itself.

What happened instead:

Clicking the label toggled columns on the outer (main) grid. Clicking the Switch still toggled the correct (inner) grid.

Steps to reproduce:

1. Use a List with DataTable and ColumnsButton (column picker) on the main list.
2. Inside an expanded row (or any nested view), render another list with DatagridConfigurable / SelectColumnsButton (second column picker).
3. Ensure both pickers can be present in the DOM (e.g. main ColumnsButton Popover uses keepMounted, so ColumnsSelector can keep rendering FieldToggle items in a portal even when the popover looks closed).
4. Open the inner column picker and click a column name (label), not the switch.

Observed: the main table’s column visibility changes.
Expected: only the nested table’s columns change.

Related code:

https://codesandbox.io/p/github/marmelab/react-admin-sandbox/csb-pdqfw2/draft/condescending-spence

<label htmlFor={`switch_${index}`}>
    <Switch
        id={`switch_${index}`}
        ...
    />

Other information:

ra-bug.mp4

ColumnsButton uses keepMounted on the Popover, so the portal target for ColumnsSelector can stay mounted; that makes duplicate-id collisions easier to hit when a nested picker is also open (or in edge cases where both trees exist).
We worked around it locally by patching FieldToggle to use React.useId(); upstream fix in ra-ui-materialui would benefit everyone.

Environment

• React-admin version: 5.14.0 (ra-ui-materialui 5.14.0)
• Last version that did not exhibit the issue (if applicable): unknown
• React version: 18.x
• Browser: any (Chrome/Firefox/Safari — behavior follows HTML label/id association)
• Stack trace (in case of a JS error): N/A

[leonardosalasd]

Hi! I'd like to take this one. I will patch FieldToggle to use React.useId() to prevent duplicate-id collisions. Can I be assigned?