react-select: how to keep dropdown open when styling in inspector?

Question

I'm using react-select and I'm customizing it,I didn't found an option to do this. Is there some workaround I can use to keep dropdown open when I'm styling it?

github.com/JedWatson/react-select/issues/927. There might be some useful comments here. — Yvo Linssen
– Yvo Linssen, Commented Mar 15, 2018 at 12:38

dana2208 · Accepted Answer · 2019-01-14 13:16:40Z

202

In chrome, got to Elements > Event Listeners > open "blur" > with the mouse go to the right of where it is written "document", then you can see a button "Remove" > click on it

answered Jan 14, 2019 at 13:16

dana2208

2,0511 gold badge12 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

IonutAnin Over a year ago

perfect answer, this covers all cases

JonH Over a year ago

with the latest versions you may need to delete the "focusout" event listener instead of blur.

Andrea Rosales · Accepted Answer · 2018-11-03 21:33:32Z

75

If you're using V2 there's a menuIsOpen prop you can use to keep the menu open at all times.

If you're using Chrome and you have the React Developer Tools plugin, you can inspect your component in the React tab of the console and manually toggle this property right from your browser. For V1, you can toggle the isOpen state to achieve the same behavior.

answered Nov 3, 2018 at 21:33

Andrea Rosales

1,0681 gold badge8 silver badges12 bronze badges

1 Comment

Ali Over a year ago

I use menuIsOpen. it worked but when I click on select for change my selected option, It didn't open again.

Mohamad amin Moslemi · Accepted Answer · 2021-04-24 03:17:25Z

58

That's work for me:

menuIsOpen={true}

answered Apr 24, 2021 at 3:17

Mohamad amin Moslemi

8398 silver badges4 bronze badges

2 Comments

Pavan Kumar V Over a year ago

Worked Fine, this should be the right answer

Paolo Biavati Over a year ago

This is the right answer, but is crypted.... Set the property menuIsOpen to true, by code or if you have the React Developers Tool browser extension , you can set it temporally with this tool

Harsh Makadia · Accepted Answer · 2020-08-29 05:16:28Z

21

Simple hack goes this way

Run this command on your console open the menu and then wait for 5 seconds and the debugger will automatically be applied and screen will be freezed.

setTimeout(() => {debugger;}, 5000)

edited Aug 29, 2020 at 5:16

answered Aug 29, 2020 at 4:55

Harsh Makadia

3,4436 gold badges36 silver badges43 bronze badges

3 Comments

Firiam Over a year ago

If using F8 does not work this is second easiest solution. Thanks!

btown Over a year ago

Used to do this; note however that this may prevent e.g. React Dev Tools from working - removing the blur handler per the top answer works better!

lofihelsinki Over a year ago

Nice one, works for me where the other solutions failed. 👍

Tasos K. · Accepted Answer · 2019-09-20 12:22:36Z

9

Beforehand I exec window.onkeydown = () => {debugger} in js console and after expanding the dropdown I click any key

It's important to keep developer tools open

edited Sep 20, 2019 at 12:22

Tasos K.

8,1057 gold badges44 silver badges68 bronze badges

answered Sep 20, 2019 at 11:55

konrad

1311 silver badge6 bronze badges

1 Comment

Daniel Over a year ago

Doesn't work on Windows 10 Chrome 80+. Dropdown is closed as soon as debugging starts.

Farzad Yousefzadeh · Accepted Answer · 2023-12-03 20:53:29Z

9

2023 answer for Google Chrome: You can enable "Emulate a focused page" by using Cmd/Ctrl + Shift + P in Chrome devtools and that won't blur the document if you use devtools. Very handy for debugging focus styles, focus handler, dialogs, popovers, dropdowns, etc.

answered Dec 3, 2023 at 20:53

Farzad Yousefzadeh

2,6291 gold badge24 silver badges29 bronze badges

1 Comment

magnus Over a year ago

worked for me with shad-cn Select component

Syscall · Accepted Answer · 2022-02-01 13:19:05Z

6

in select component send this as props

menuIsOpen={true}

edited Feb 1, 2022 at 13:19

Syscall

19.8k10 gold badges44 silver badges60 bronze badges

answered Feb 1, 2022 at 12:48

mahesh murugan

631 silver badge2 bronze badges

Comments

stanley355 · Accepted Answer · 2022-01-24 04:55:22Z

4

You can use the menuIsOpen props. It was on the react-select documentation and it works! Docs: https://react-select.com/props Screenshot:

answered Jan 24, 2022 at 4:55

stanley355

3111 gold badge3 silver badges7 bronze badges

Comments

Tasos K. · Accepted Answer · 2019-09-20 12:22:18Z

3

Maybe this could help:

<Select 
   ref={el => (this.selectRef =el)}
   onBlur={() => {
     setTimeout(
       () => 
          this.selectRef.setState({
            menuIsOpen: true,
          }),
        50
     );
   }}
  />

edited Sep 20, 2019 at 12:22

Tasos K.

8,1057 gold badges44 silver badges68 bronze badges

answered Jun 28, 2019 at 10:03

Slobodan Krasavčević

843 bronze badges

1 Comment

user151496 Over a year ago

this is the only thing that worked. by the way, you cannot use this inside set timeout that way, you have to create a variable reference outside

ghashi · Accepted Answer · 2019-12-18 21:32:54Z

2

By using the Chrome React extension, you can force the "isOpen" (v3: "menuIsOpen") state value to true on the Select component.

more info here: https://github.com/JedWatson/react-select/issues/927#issuecomment-313022873

answered Dec 18, 2019 at 21:32

ghashi

1,5681 gold badge13 silver badges18 bronze badges

Comments

L Y E S - C H I O U K H · Accepted Answer · 2018-03-16 12:14:23Z

1

If you are using Google Chrome to debug. You can hover over the select drop down and press Ctrl+Shift+C simultaneously and it should be automatically selected in the debug window

edited Mar 16, 2018 at 12:14

L Y E S - C H I O U K H

5,1809 gold badges44 silver badges61 bronze badges

answered Mar 15, 2018 at 21:15

Michael D

1066 bronze badges

Comments

Pinki Gupta · Accepted Answer · 2018-03-15 20:00:04Z

-6

Open dropdown and then right click on dropdown... it will drown a pop over and on inspector.. now you can work upon your dropdown.

answered Mar 15, 2018 at 20:00

Pinki Gupta

183 bronze badges

2 Comments

Stan Bright Over a year ago

As soon as you click somewhere in the inspector you will lose the focus.

engma Over a year ago

This actually won't work, the problem is you cannot perform any action or the menu would disappear

Collectives™ on Stack Overflow

react-select: how to keep dropdown open when styling in inspector?

12 Answers 12

2 Comments

1 Comment

2 Comments

3 Comments

1 Comment

1 Comment

Comments

Comments

1 Comment

Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

2 Comments

1 Comment

2 Comments

3 Comments

1 Comment

1 Comment

Comments

Comments

1 Comment

Comments

Comments

2 Comments

Linked

Related