[material-ui][SpeedDialAction] Props id does not appear in HTML

[MatetlotDev]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/proud-water-fyxu9l?file=/src/App.js

Reproduce

1. Launch the sandbox
2. Open up the inspector
3. Try to search The Ids of the SpeedDialAction components

Actual result

The IDs are not present in the html button components.

Expected result

See the IDs of the actions on the button components.

Current behavior 😯

We do not see the Ids on the button elements

Expected behavior 🤔

We should see the Ids

Context 🔦

I want to add some IDs on the actions so I can make some tests and query the actions by their IDs

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[michaldudak]

Thanks for the report. The SpeedDialAction follows the rules we have for forwarding extra props - it spreads them on the root element. However, in this case, the root element is a tooltip, and having these extra props on it is confusing and likely doesn't make sense.

We can't change how it works currently without introducing a breaking change, but fortunately, there is a workaround you can use: the FabProps prop.

{actions.map((action) => (
  <SpeedDialAction
    key={action.name}
    icon={action.icon}
    tooltipTitle={action.name}
    FabProps={{ id: action.id }}
  />
))}

It sets its props on the button itself, so this should help you target the button.

I'll add this to the v6 milestone, so we can consider redesigning the component in the next major version.

[MatetlotDev]

Alright, I understand now why I couldn't see my IDs, thank you very much for your workaround, It does work perfectly indeed !

[michaldudak]

Let's leave the issue open, so we remember about this problem when designing the next version.

[aarongarciah]

I see pros and cons with following the rule of forwarding extra props on the root element in SpeedDialAction. While it's consistent with every other component, it's counterintuitive for devs who don't know how it's implemented (the root element is a Tooltip). At the same time, we have FabProps today, so the issue can be circumvented. Note that the plan to deprecate FabProps is on halt (see #41281).

@mnajdova @DiegoAndai, do you know if we have other components that break this rule? Or are there other components that have the same "problem" where the root element is not what it seems to be?

[aarongarciah]

After some discussions with the team, we decided to change the approach and we'll be forwarding props to the SpeedDialAction button instead of the tooltip. This is what devs expect. We'll also add a slot for the tooltip in case someone needs to customize the tooltip. We'll also take a look to other components to see if some of them would benefit from such a change.

[mnajdova]

We can make the change in stages.

1. Add slots/slotProps where the root would be the Fab and the tooltip will be a different slot
2. Update the docs to teach people to use this API
3. Deprecate the FabProps
4. In the next major, make the root props being spread on the Fab.