Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Tooltip] When wrapping an input which is disabled while focused an error is thrown #45373

Open
DavidJohnWilliams opened this issue Feb 20, 2025 · 7 comments
Assignees
Labels
bug 🐛 Something doesn't work component: tooltip This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material

Comments

@DavidJohnWilliams
Copy link

DavidJohnWilliams commented Feb 20, 2025

Steps to reproduce

Steps:

  1. Open this link to live example: Code Sandbox
  2. Click in the input as soon as the preview loads (if it is disabled already, refresh the preview and try again)
  3. Wait a few seconds

Current behavior

A Javascript error is thrown

Expected behavior

The input should be disabled as usual

Context

Input has a useEffect which calls onBlur without an event. This is sort of documented i.e. a comment on the onBlur of Input however the Tooltip does not take account of this and tries to access event.target.

Your environment

It happens in any browser

Search keywords: tooltip target

@DavidJohnWilliams DavidJohnWilliams added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Feb 20, 2025
@lukamandic
Copy link

Hi @DavidJohnWilliams, following your steps I can not reproduce this behavior

@DavidJohnWilliams
Copy link
Author

DavidJohnWilliams commented Feb 20, 2025

@lukamandic Hmmm, I'm not really sure why? You need to click in the input once the sandbox loads (before the input is disabled), then wait. That's it. If it is disabled too fast for you, increase the timeout or refresh the preview.

20250220-2346-39.9438120.mp4

@siriwatknp
Copy link
Member

I can reproduce the issue. I think this is a bug.

@siriwatknp siriwatknp added bug 🐛 Something doesn't work component: tooltip This is the name of the generic UI component, not the React module! and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 21, 2025
@sarathkumarsasi
Copy link

I will work on this

@mj12albert
Copy link
Member

Quickly tried something like this should work:

diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js
index c7479ac521..b1129eb799 100644
--- a/packages/mui-material/src/Tooltip/Tooltip.js
+++ b/packages/mui-material/src/Tooltip/Tooltip.js
@@ -478,8 +478,8 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
 
   const [, setChildIsFocusVisible] = React.useState(false);
   const handleBlur = (event) => {
-    if (!isFocusVisible(event.target)) {
-      setChildIsFocusVisible(false);
+    setChildIsFocusVisible(false);
+    if (event && !isFocusVisible(event.target)) {
       handleMouseLeave(event);
     }
   };

@sarathkumarsasi I've assigned you ~

@mj12albert mj12albert added the package: material-ui Specific to @mui/material label Feb 21, 2025
sarathkumarsasi added a commit to akshayaqburst/material-ui_qb_2 that referenced this issue Feb 21, 2025
… while focused an error is thrown mui#45373

Signed-off-by: Sarathkumar <[email protected]>
@sarathkumarsasi
Copy link

sarathkumarsasi commented Feb 21, 2025

mj12albert

Image
The setChildNode function also utilizes the event object, so I added a null check at the beginning of the handleFocus function. Is this acceptable?

@mj12albert
Copy link
Member

Is this acceptable?

@sarathkumarsasi If it's not directly related to the issue, I would suggest leaving it alone 🤔

sarathkumarsasi added a commit to akshayaqburst/material-ui_qb_2 that referenced this issue Feb 24, 2025
… while focused an error is thrown mui#45373

Signed-off-by: Sarathkumar <[email protected]>
sarathkumarsasi added a commit to akshayaqburst/material-ui_qb_2 that referenced this issue Feb 25, 2025
… while focused an error is thrown mui#45373

Fixed linting issue.

Signed-off-by: Sarathkumar <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: tooltip This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material
Projects
None yet
Development

No branches or pull requests

5 participants