React-select: Dev mode react-select

[khankuan]

Hi, I noticed a little bit of annoyance when the menu keeps closing after losing focus. Wonder if there is already a way to overcome that while developing. Otherwise, will be alwaysOpen option be desirable?

Cheers!

[JedWatson]

Thanks for the PR! Could you explain a little more background on what the motivation is for this?

[khankuan]

There are times where i needed to debug the library, or to look at the menu elements in the inspector to figure out the css structure. The menu closes as soon as it loses focus and i can't really continue to debug. This option allow us to directly fix the isOpen state to true in such cases. And of course, who knows someone might design an interface that wants to keep the menu always open :P

[drobannx]

To add to this, I am using this in a project now and we have a use case where we do not want the menu to close when selecting an option in the menu. We still want it to close when clicking outside the component. Potentially we could utilize another hook to programmatically close the menu.

[ccslakey]

This would also be extremely useful for modifying the inner menu's CSS in development

[benjamindulau]

No need for a dev option for this. By using the Chrome React extension, you can simply force the "isOpen" state value to true on the Select component (note: there is an input at the bottom for searching components). Then you can freely inspect the select options :)

[mystrdat]

I am surprised that this option is missing, not just for testing purposes. Having fine grained control over how exactly the menu closes seems like an obvious addition.

[pzrq]

Agree with @benjamindulau that no dev option is needed.

However it would be a much more pleasant developer experience if it were documented somewhere how to force the "isOpen" (v3: "menuIsOpen") state value to true:

[JedWatson]

I'm going to close this because the dev workflow has been clearly explained with react devtools, and there are other issues / PRs discussing this feature for other use cases

[Slapbox]

This method does not work in the React Devtools I have available in Electron. An option to keep the menu open built into the package would be extremely appreciated.

There are no checkboxes and modifying the state from false to true is not applied or saved.

[AMongeEntytle]

This does not work for working on ie 11

[wildeyes]

Not really a comfortable way to develop a select when using hot reload (as it resets state).

[AlahmadiQ8]

Hope this helps, I ran into this issue while trying to style the dropdown menu. I found that the easiest way is to remove the blur event listener from the input element using chrome devtools. This way the dropdown is not collapsed when you inspect it.

Checkout my answer for more details: https://stackoverflow.com/a/49904173/5431968

[nosir]

+1 for @AlahmadiQ8 's solution also +1 for alwaysOpen option

[nickav]

there is a new prop now: menuIsOpen (https://react-select.com/props)

[andrevenancio]

The above method explained above only works if you do not click on the dev tools to open a closed parent node. you can use your keyboard arrows to find the elements you want, but as soon as you click on the dev tools to either write css directly on the dev tools, or anything like that, the component loses focus regardless if you added the isOpen on React Dev Tools or not.
Would be nice to have a mode that is always open. or a way around this.

[iamdanthedev]

you can use "break on subtree modifications" feature on element inspector (right click on the parent node which the dropdown gets attached to)

but it doesn't always help as sometime is messes up the styles somehow

[lucassardois]

Another solution is to change the value of the menuIsOpen props by some text such as hello, very hacky 😃