React-select: Hitting escape in a modal dialog kills the dialog

Created on 6 May 2016 · 7Comments · Source: JedWatson/react-select

I use react-bootstrap modals. It listens to escape key to close itself. I use a select widget inside a modal window. While the dropdown is showing, I hit escape which closes the dropdown as well as the modal. I guess the select widget should suppress that keypress after closing the dropdown so that its not propagated to the modal hosting it.

issubug-unconfirmed

Source

aitchnyu

👍2

Most helpful comment

You can solve this by using custom input component like with prop

components={{ Input: props => (
   <components.Input 
       {...props}
       onKeyUp={(e) => {
          e.stopPropagation();
       }}
   />
) }}

hope it helps

imornar on 27 Dec 2018

🚀1 👍1

All 7 comments

@aitchnyu Looks like the quick and easy solution is to add event.stopPropagation(); here (in addition to event.preventDefault();).

I'm not sure if the modal use case is big enough for a PR, though. So you may have to fork your own.

gojohnnygo on 7 May 2016

👍1

I'm having the same issue. What did you end up doing? Forking?

eisenjulian on 4 Jul 2016

@eisenjulian I no longer use a modal, hope you work around or resolve this.

aitchnyu on 4 Jul 2016

That's not the root cause. react-select already does a stopPropagation here. The problem arises because react-select stops the keyDown event, but react-bootstrap's Modal listens to keyUp, not keyDown.

You can disable the closing of Modals with escape using keyboard={false}.

Maybe react-select should also move the escape handling logic into a keyUp handler, I'm not sure. This way when react-select stops the event propagation, the Modal will work correctly without any workarounds.

tailsu on 6 Mar 2017

👍1

You can solve this by using custom input component like with prop

components={{ Input: props => (
   <components.Input 
       {...props}
       onKeyUp={(e) => {
          e.stopPropagation();
       }}
   />
) }}

hope it helps

imornar on 27 Dec 2018

🚀1 👍1

Any updates on this?

asaadmahmood on 26 Jul 2019

Hello -

In an effort to sustain the react-select project going forward, we're closing issues that appear to have been resolved via community comments or issues that are now redundant based on their age.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you, and we'll re-open it if necessary.