search

webscopeio / react-textarea-autocomplete

📝 React component implements configurable GitHub's like textarea autocomplete.
MIT License
451 stars 80 forks source link

Prevent form submission on Enter when autocomplete is open #112

Closed O4epegb closed 5 years ago

O4epegb commented 5 years ago

Is it possible to prevent form submission on Enter key press when autocomplete is open?

I couldn't find a way or hack to do this! Basically it means that form submits instead of selecting needed autocomplete value. I know that you can press Tab to autocomplete but Enter is more intuitive I think and most users press enter when selecting autocomplete suggestions.

Would be cool to have a prop to block event propagation, or maybe some state callback so you could stop submission by yourself if autocomplete is open.

What do you think?

P.S. did not tried v.4 yet, maybe it is possible there?

jukben commented 5 years ago

Hey, could you please prepare repro on codepen (based on this https://codepen.io/jukben/pen/bYZqvR). It sounds like something worth to fix. 👍

P.S: I've tried to reproduce it but unsuccessfully. However, I noticed that autocomplete won't disappear once you lost the focus in the textarea. It might be a good idea to introduce prop for managing this behavior. Although I'm not sure, it might have to be just hardcoded. Github does the same, what do you think? Once there is no autocomplete if the textarea doens't have a focus, your case should be fine, isn't it?

O4epegb commented 5 years ago

Here it is: https://codepen.io/anon/pen/OrgqBp

Enter some message then try to use a smile with autocomplete, message will be submitted instead of smile insertion (because it submits them on "Enter" key press). So to prevent this the submission handler need somehow to know that autocomplete is open right now and "Enter" key press is not used for submission but for picking an autocomplete value. Or key press event propagation should be prevented.

At least that is my understanding, maybe I am wrong somewhere)

jukben commented 5 years ago

I see that's an actually great point. I've prepared a PR for it. Check it out, please. 🙏

O4epegb commented 5 years ago

Oh, I am sorry, was on vacation, coulndt check!

Very cool, that is exactly what I needed, thank you very much! :) Gonna test new version this week

jukben commented 5 years ago

No problem @O4epegb I hope you've enjoyed it!