-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
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
[material-ui][Autocomplete] Fix listbox opens and closes on click when used with limitTags
#42494
[material-ui][Autocomplete] Fix listbox opens and closes on click when used with limitTags
#42494
Conversation
Netlify deploy previewhttps://deploy-preview-42494--material-ui.netlify.app/ Bundle size reportDetails of bundle changes (Toolpad) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
limitTags
limitTags
limitTags
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. Input areaWrapper area |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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?
hi, @ZeeshanTamboli I think the same way about slightly delay movement. autocomplete-delay.movcheck result please 🙏 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
I didn't know if it was okay to modify test code. |
@appleSimple Could you add a test case for this using the |
@ZeeshanTamboli I will fix it, too. open_close_when_click_arrow.mov |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@appleSimple Thanks for the pull request.
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.See discussion below in the pull request.
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