[material-ui][Autocomplete] Fix listbox opens and closes on click when used with limitTags

[appleSimple]

Preview: https://deploy-preview-42494--material-ui.netlify.app/material-ui/react-autocomplete/#limit-tags

Fixes #42432

Input element is fall down because of hide tag was shown.
So event target not same in the code below.
I fixed it by add style property pointer-events: none; at autocomplete input. To attach mdn link for you.

// Autocomplete.js

onClick: (event) => {
  if (event.target === event.currentTarget) {
    handleInputMouseDown(event);
  }
},

[mui-bot]

Netlify deploy preview

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

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 73ae5d9

[ZeeshanTamboli]

This works as shown in the documentation:

Before: https://mui.com/material-ui/react-autocomplete/#limit-tags
After: https://deploy-preview-42494--material-ui.netlify.app/material-ui/react-autocomplete/#limit-tags

However, the tests fail as shown in the CI.

[appleSimple]

Thank you for read. @ZeeshanTamboli .

I passed CI test done! 🎉 please check this result.

Additionally, I deleted previous fixes and pushed another. Because of cause was wrong I expected.
When I clicked Input, occured events that Input's mouse down and wrapper's click so the list box is open and close because of double events.

Input area

Wrapper area

[ZeeshanTamboli]

This seem to work well. But there is a slight delay in the tag getting rendered after the listbox is opened as shown in the video:

Autocomplete.42494.mp4

Could that be avoided?

[appleSimple]

hi, @ZeeshanTamboli

I think the same way about slightly delay movement.
I tried several things and finally i fixed it done. The cause remains the same.

autocomplete-delay.mov

check result please 🙏

[ZeeshanTamboli]

The current solution works but is not ideal. The bug is a regression from #36369. The following fix resolves the issue:

--- a/packages/mui-base/src/useAutocomplete/useAutocomplete.js
+++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.js
@@ -1042,6 +1042,7 @@ export function useAutocomplete(props) {
   const handleInputMouseDown = (event) => {
     if (!disabledProp && (inputValue === '' || !open)) {
       handlePopupIndicator(event);
+      event.stopPropagation();
     }
   };

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
index c8ba035f39..8dc63ca14e 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -724,11 +724,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
             ref: setAnchorEl,
             className: classes.inputRoot,
             startAdornment,
-            onClick: (event) => {
-              if (event.target === event.currentTarget) {
-                handleInputMouseDown(event);
-              }
-            },
+            onMouseDown: (event) => handleInputMouseDown(event),
             ...((hasClearIcon || hasPopupIcon) && {
               endAdornment: (
                 <AutocompleteEndAdornment className={classes.endAdornment} ownerState={ownerState}>
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
index cc2550cb23..3a3e831e9a 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -1109,7 +1109,7 @@ describe('<Autocomplete />', () => {
         />,
       );

-      fireEvent.click(ref.current);
+      fireEvent.mouseDown(ref.current);
       expect(handleOpen.callCount).to.equal(1);
     });

Explanation:

The issue was that the mousedown event on the input (handleInputMouseDown handler) was being called twice, leading to the initial opening and then immediate closing of the listbox. The open state was toggled in handleInputMouseDown because it was executed twice. This happened because the mousedown event from the input's onMouseDown bubbled up to the root's onClick, causing handleInputMouseDown here to be executed again.

By the time the click event is fired, the event has already propagated through the mousedown and mouseup phases, potentially causing the target and currentTarget to be the same if the event bubbled up to the parent div.

The solution above stops the event from bubbling from the input's mousedown event and changes the root div's onClick to onMouseDown because we are handling the input's mousedown event. This approach also retains the fix from #36369.

Additionally, we need to add a test case for this with the limitTags prop to prevent future regressions.

[appleSimple]

I didn't know if it was okay to modify test code.
Thanks for the explanation 😊

[ZeeshanTamboli]

@appleSimple Could you add a test case for this using the limitTags prop? The listbox should open but not close immediately on click. The test should pass here but fail in the next branch, ensuring it tests the correct behavior.

[appleSimple]

@ZeeshanTamboli
My answer was too late, and I will try to make test case you said.
I guessed cause of fail in the next branch is "when clicked the arrow". (like below video)
This changed was occured same issue.

I will fix it, too.

open_close_when_click_arrow.mov

[appleSimple]

I have added the test code. Could you please check if it was added as you intended?

Due to a recent PR that removed dependencies, the files that need to be updated have changed. Therefore, I have added the necessary code to those files. (#42907)

[ZeeshanTamboli]

This test passes in the next HEAD branch, so it isn't testing correctly what's needed. It should pass in this branch but fail in the next branch.

[appleSimple]

I got it, I'll modify it, soon!!

[appleSimple]

@ZeeshanTamboli
I clearly included the cause of the bug in the test title. I wrote the test code forgetting this. Sorry.
Please check this change.

[ZeeshanTamboli]

This is also passing on the next branch. It should fail there. handleClose should be called once there.