CODEWITHSUNDEEP
javascripthtmlreactjsreact-select
Adam Mor
Adam Mor

Reputation: 99

React select check on key down event whether menu is open or closed

I am using react-select in my project for the select elements.

I wonder if there is a way to check on keydown event in the select (can be both the select input or on the menu) if the menu is open or closed.

I am using react select version ^2.4.2, and have to support explorer.

P.S: for whoever is not familiar with the react-select library: it doesnt create typical HTML 'select' and 'option' elements, but rather a text input and on each click (or some dedicated keydown events (accessibility)) on the input/menu - it toggles a div with the options.

Thank you!

Upvotes: 4

Views: 4421

Answers (2)

fammi farendra
fammi farendra

Reputation: 17

Use this :

selectRef.current.state.focusedOptionId

selectRef is your react-select ref state.focusedOptionId is null is menu closed state.focusedOptionId has value is menu open

you can detect it on keydown event, but i didnot try when react-select has no options

Upvotes: 0

Adam Mor
Adam Mor

Reputation: 99

found the answer for it - I am using the built in onMenuClose and onMenuOpen props to toggle a custom attribute (e.g. 'is-open') value between true/false on the input.

Upvotes: 4

Related Questions