How to not deselect react-select when clicking dev tools to style it

Question

My typical workflow when choosing styles for a component is to use the dev-tools in the browser to play around with the styles until I'm happy with the look, and then copy the chosen styles permanently back to the code.

But if I want to see the dropdown in react-select, I need to click it. When I click back to the dev-tool, the dropdown disappears as the component is de-selected.

Is there a way to keep the dropdown open as I style it?

Here's a sandbox if you want to try: https://codesandbox.io/s/4rlmrp38j7

Answer 1

I just found the prop menuIsOpen which will force the dropdown to stay open.

However, if there is a way using the dev-tools or another method I'd be interested in that too and will happily mark that as more robust and correct than this answer.

Answer 2

You would recommend you to use some extension to inspect the code React:

• for chrome
• for firefox

Then in react-select v1 you can set isOpen and in v2 menuIsOpen to true without changing you code. I will also suggest to take a look at this page and directly in the source code on the repo github to have an idea of the default style.