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

[Autocomplete] Fix listbox opened unexpectedly when component is disabled #38611

Merged
merged 3 commits into from
Aug 29, 2023

Conversation

mj12albert
Copy link
Member

@mj12albert mj12albert commented Aug 23, 2023

Fixes #36867

Here is a sandbox with the original repro and a simplified one that shows the fix: https://codesandbox.io/s/https-github-com-mui-material-ui-pull-38611-3hygqs?file=/demo.tsx

I can hardly believe how simple this fix could be, but it make sense to block the popup from opening if the component is disabled:

   const handleInputMouseDown = (event) => {
-    if (inputValue === '' || !open) {
+    if (!disabledProp && (inputValue === '' || !open)) {
       handlePopupIndicator(event);
     }
   };

Here is the simplified repro (I colored different parts of it) showing the bug: https://codesandbox.io/s/https-github-com-mui-material-ui-issues-36867-m25xds?file=/demo.tsx

IMG_8EDEEC6DD982-1

Both cases are reproducible:

  1. Click on any part of the component that doesn't overlap (green area) with the input slot or the popupIndicator- it will open the popup.

Seems that when the click handler on the InputBase fires (it will even though the Autocomplete is disabled, reason here), it will trigger the handleInputMouseDown (here), and open the popup.

  1. Press and hold the left mouse button anywhere on the component except for the popupIndicator (green or blue area), move the cursor until it is over the popup indicator (red area) then release the mouse button - it will open the popup.

Not 100% sure what's going on but since fixing case 1 automatically fixed this one, I guess it's still triggering the click handler of InputBase even though the cursor is no longer directly over it, and the disabled popup button doesn't block the mouseup/click phase of the user action 🤔

@mj12albert mj12albert added package: material-ui Specific to @mui/material component: autocomplete This is the name of the generic UI component, not the React module! labels Aug 23, 2023
@mui-bot
Copy link

mui-bot commented Aug 23, 2023

Netlify deploy preview

https://deploy-preview-38611--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 617d8f2

@mj12albert mj12albert force-pushed the fix/disabled-autocomplete-click branch 2 times, most recently from e90da58 to 9932304 Compare August 23, 2023 12:51
@mj12albert mj12albert added the bug 🐛 Something doesn't work label Aug 25, 2023
@mj12albert
Copy link
Member Author

@mj12albert mj12albert force-pushed the fix/disabled-autocomplete-click branch from 5e1dff6 to 3d0a55d Compare August 28, 2023 07:26
@mj12albert mj12albert force-pushed the fix/disabled-autocomplete-click branch from 3d0a55d to 617d8f2 Compare August 28, 2023 08:13
@mj12albert mj12albert marked this pull request as ready for review August 28, 2023 08:29
Copy link
Member

@michaldudak michaldudak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree, this looks very simple :)
I couldn't find anything wrong with it.

@mj12albert mj12albert merged commit a4d9cb1 into mui:master Aug 29, 2023
18 checks passed
@mj12albert mj12albert deleted the fix/disabled-autocomplete-click branch August 29, 2023 12:18
@oliviertassinari
Copy link
Member

It looks nice 👍

mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Sep 8, 2023
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Sep 8, 2023
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: autocomplete This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Autocomplete][material-ui] Disabled is not working properly
4 participants