[Autocomplete] Clicking anywhere on Input should open listbox#29500
[Autocomplete] Clicking anywhere on Input should open listbox#29500hbjORbj wants to merge 4 commits intomui:masterfrom
Conversation
hbjORbj
added
scope: autocomplete
github-actions
bot
added
the
PR: out-of-date
hbjORbj
force-pushed
the
autocomplete-fix
branch
from
85abb1f to
48cbefb
Compare
github-actions
bot
removed
the
PR: out-of-date
hbjORbj
added
type: regression
| onBlur: handleBlur, | ||
| onFocus: handleFocus, | ||
| onChange: handleInputChange, | ||
| onMouseDown: handleInputMouseDown, |
There was a problem hiding this comment.
I decided to use replace onMouseDown with onClick because this approach requires less change.
For example, when multiple is enabled, we pass onDelete: handleTagDelete() to Chips, which are used for multiple values. Chip's onDelete API uses a click event, so dealing with event bubbling gets more complicated.
There was a problem hiding this comment.
It breaks this demo https://deploy-preview-29500--material-ui.netlify.app/components/autocomplete/#playground
Also, I'm not sure about triggering the popup on mouseup. It was done on mouseup to reproduce the <select> on macOS, select2, and react-select behaviors.
To be honest, I think that we could ignore the issue in the first place (I recall doing this in the past, not that it's not something that we want to fix, but more about it's a high effort item). For example, there are Autocomplete issues that are easier to solve with more traction from developers: e.g. #18450.
| }); | ||
| }; | ||
|
|
||
| const { onClick: onInputClick, ...inputProps } = getInputProps(); |
There was a problem hiding this comment.
This onClick prop fork seems to defeat the purpose of having getInputProps(). All the props were supposed to land on the same DOM element.
hbjORbj
force-pushed
the
autocomplete-fix
branch
from
e8e11e4 to
becdd72
Compare
I agree with you on this point. It looks little laggy. I will explore other approaches. |
Have you figured it out? |
github-actions
bot
added
the
PR: out-of-date
|
@hbjORbj what's the status here? Would be great to have the fix. |
|
i think #36369 PR also solving same issue |
Correct, let's close this one. |
|
Yes, we can close it |
6 participants
Closes #29381
Problem:
<input>insideInputBasediv opens the list box. It is generally expected that clicking anywhere on theInputBasediv should open the listbox.2021-10-30.11-15-40.mp4
Solution:
onMouseDownevent from the nested<input>elementonClickevent toInputBasedivevent.stopPropagation()properly on handlers to keep all other behaviours the same.after.mov