material-ui icon indicating copy to clipboard operation
material-ui copied to clipboard

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

Open appleSimple opened this issue 1 year ago • 9 comments

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);
  }
},

appleSimple avatar Jun 02 '24 06:06 appleSimple

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

mui-bot avatar Jun 02 '24 06:06 mui-bot

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

image

Wrapper area

image

appleSimple avatar Jun 16 '24 07:06 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.

https://github.com/mui/material-ui/assets/73057489/6586d478-98d4-4e6b-ba06-af3c2728a6d4

check result please 🙏

appleSimple avatar Jun 24 '24 10:06 appleSimple

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

appleSimple avatar Jun 30 '24 11:06 appleSimple

@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 avatar Jun 30 '24 13:06 ZeeshanTamboli

@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

appleSimple avatar Jul 09 '24 03:07 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)

appleSimple avatar Jul 14 '24 07:07 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.

appleSimple avatar Jul 16 '24 14:07 appleSimple

@ZeeshanTamboli I tried several tests on the 'next' branch. please check it!

appleSimple avatar Jul 21 '24 08:07 appleSimple