-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
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
[Autocomplete] Add ability to override/compose key down events in autocomplete #19887
Comments
@ivan-jelev Interesting, we have seen a similar concern raised in #19500. What do you think of my proposal at #19500 (comment)? I think that we could move forward with it :). |
I had forgotten to link the previous benchmark I have run on the issue. Basically, I have been wondering about this very problem in the past for the potential touch handle conflicts between the components: once a component decides to handle an event, the other components shouldn't intervene. The idea for Then, I have noticed that Downshift went down the same road: downshift-js/downshift#358. Event HandlersYou can provide your own event handlers to Downshift which will be called before the default handlers: const ui = (
<Downshift>
{({getInputProps}) => (
<input
{...getInputProps({
onKeyDown: event => {
// your handler code
}
})}
/>
)}
</Downshift>
) If you would like to prevent the default handler behavior in some cases, you can set the event's const ui = (
<Downshift>
{({getInputProps}) => (
<input
{...getInputProps({
onKeyDown: event => {
if (event.key === 'Enter') {
// Prevent Downshift's default 'Enter' behavior.
event.preventDownshiftDefault = false
// your handler code
}
}
})}
/>
)}
</Downshift>
) If you would like to completely override Downshift's behavior for a handler, in favor of your own, you can bypass prop getters: const ui = (
<Downshift>
{({getInputProps}) => (
<input
{...getInputProps()}
onKeyDown={event => {
// your handler code
}}
/>
)}
</Downshift>
) In this context, it seems like a straightforward direction to take. |
@oliviertassinari You want to cover only the first two cases? |
@marcosvega91 For the third case, I think that it should only concern the hook API, which support it. |
@oliviertassinari It means that you need to pass a parameter to Autocomplete component to understand if you want to override the default behavior ? |
@marcosvega91 I don't understand, what do you mean? |
To implement the third behavior we need a way fro the user to tell to Autocomplete component what it will have to do. Now the onKeyDown is passed through useAutocomplete hook and there the callback is called at the end of onKeyDown function. Maybe I didn't understand the case 🥳 |
@marcosvega91 I think that that second and third cases should be identical. |
Yes right as i said in the previous comment i didn't read the case well. So i can create a PR for this :) |
@oliviertassinari There is a test that now fails because of changing. onKeyDown={(event) => {
if (!event.defaultPrevented && event.key === 'Enter') {
handleSubmit();
}
}} Because of the user keydown function is on the top of keydown listener in useAutocomplete, defaultPrevented will never be true. |
Summary 💡
Developer should have ability to override or compose default onKeyDown functionality
Examples 🌈
Currently when i specify custom onKeyDown prop i'll get default functionality executed and only then the one i provided.
It makes not possible to override or compose default functionality for specific key pressed.
What i want to be able to do is:
Motivation 🔦
Motivation is to have ability to override default behaviour for specific event Keys.
Possible use case:
Space
key and onEnter
key drop down should close and blur outThe text was updated successfully, but these errors were encountered: