[material-ui][Autocomplete] Fix listbox opens and closes on click when used with `limitTags`
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);
}
},
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 :no_entry_sign: dangerJS against cfb9bd55b5ad96fa57e3d03a9f415ed5b412c40f
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
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.
https://github.com/mui/material-ui/assets/73057489/6586d478-98d4-4e6b-ba06-af3c2728a6d4
check result please 🙏
I didn't know if it was okay to modify test code. Thanks for the explanation 😊
@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.
@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.
https://github.com/mui/material-ui/assets/73057489/e064ea89-2d7d-4d93-b517-76675385f1bd
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 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 I tried several tests on the 'next' branch. please check it!