[Tooltip] Hide Tooltip when its child gets disabled

[chudesno]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/long-http-sjxfvz?workspaceId=93f2e57a-b3c6-40d3-8a9d-fec380821dae
2. Click anywhere on the page and press tab to give focus to one of the buttons. Tooltip appears.
3. Press Enter on the keyboard. This disables the focused button.

Current behavior

Tooltip remains visible until another button within the same Provider gets focused.

Expected behavior

Tooltip should get closed as soon as it becomes disabled.

Context

The original issue was spotted on Material UI and reported here mui/material-ui#44280
The root cause seems to be the React itself missing blur event as disable flag gets set by React itself. See: facebook/react#9142

Your environment

npx @mui/envinfo

System:
OS: macOS 12.6.1
Binaries:
Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm
pnpm: 9.13.2 - ~/.nvm/versions/node/v20.16.0/bin/pnpm
Browsers:
Chrome: 131.0.6778.86
Edge: 131.0.2903.70
Safari: 15.6.1

The issue is reproducible in Chrome and Safari, but not in Firefox.

Search keywords: Tooltip blur onBlur disabled

[chudesno]

The pull request for Material UI has been put on hold in favor of Base UI: mui/material-ui#44507
Attempted solution is to listen to native blur additionally, which appears to be fired reliably.
Would love to create a pull request here, if issue is acknowledged by maintainer.

[mj12albert]

@chudesno I'm afraid your sandbox is crashing 😐
The AnchorButton must be placed within Tooltip.Root:

<React.StrictMode>
    <Demo />
    <Demo />
    <AnchorButton>FFF</AnchorButton>
</React.StrictMode>

[chudesno]

My bad! Sandbox is fixed now. @mj12albert please, take another look

[mj12albert]

Expected behavior
Tooltip gets hidden as the disabled button looses focus automatically.

Maybe it should close as soon it becomes disabled? 🤔

[chudesno]

Yes, absolutely. What I meant here is that blur gets fired by browser when button gets disabled and the focus moves to body. onBlur does not fire though, so it remains open.

[colmtuite]

The focus on becoming disabled seems odd/unnecessary here? Tooltip should close when the button is activated by any means, right @atomiks? Currently, it closes when you click or press ESC, but not when you activate the button via Space or Enter.

[atomiks]

The focus on becoming disabled seems odd/unnecessary here?

If disabled was changed from an external action, then dismissing the tooltip upon trigger click/press is still not enough (though it would likely solve most cases)

[TheOneTheOnlyJJ]

Is there any update on this?

[atomiks]

@TheOneTheOnlyJJ the issue is largely resolved in the latest versions of Base UI for button triggers as a result of the linked PR above (floating-ui/floating-ui#3145)

https://codesandbox.io/p/sandbox/priceless-resonance-6xmhjr

When pressing Enter/Space the tooltip disappears. It doesn't address the edge case above (#891 (comment)) but I figure that's quite a bit rarer.

[TheOneTheOnlyJJ]

Would you happen to have a rough idea of when it will land in Material UI?

I opened mui/material-ui#44280 some 4 months ago, and it seems like it was fixed given what I'm reading here, but I still have the same issue.
The problem, as seen in the code sandbox from there, is still present.