web-dev-qa-db-fra.com

react-select: comment garder la liste déroulante ouverte lors du coiffage dans l'inspecteur?

J'utilise react-select et je le personnalise, je n'ai pas trouvé d'option pour le faire. Existe-t-il une solution de contournement que je peux utiliser pour garder la liste déroulante ouverte lorsque je la stylise?

reactjsnpmcomponentsreact-select
14
lucasviewup

En chrome, accédez à Elements> Event Listeners> ouvrez "flou"> avec la souris allez à droite de l'endroit où il est écrit "document", puis vous pouvez voir un bouton "Supprimer"> cliquez dessus

14
dana2208

Si vous utilisez V2, il y a un accessoire menuIsOpen que vous pouvez utiliser pour garder le menu ouvert à tout moment.

Si vous utilisez Chrome et que vous avez le React plugin Developer Tools, vous pouvez inspecter votre composant dans le React dans la console et basculez manuellement cette propriété directement depuis votre navigateur. Pour la V1, vous pouvez basculer l'état isOpen pour obtenir le même comportement.

6
Andrea Rosales

Au préalable, j'exécute window.onkeydown = () => {debugger} dans la console js et après avoir étendu la liste déroulante, je clique sur n'importe quelle touche

Il est important de garder les outils de développement ouverts

1
konrad

Si vous utilisez Google Chrome pour déboguer. Vous pouvez survoler le menu déroulant de sélection et appuyer sur Ctrl+Shift+C simultanément et il doit être automatiquement sélectionné dans la fenêtre de débogage

1
Michael D

Cela pourrait peut-être aider:

<Select 
   ref={el => (this.selectRef =el)}
   onBlur={() => {
     setTimeout(
       () => 
          this.selectRef.setState({
            menuIsOpen: true,
          }),
        50
     );
   }}
  />
0
Slobodan Krasavčević

En utilisant Chrome React extension , vous pouvez forcer la valeur d'état "isOpen" (v3: "menuIsOpen") à true sur le composant Select.

plus d'informations ici: https://github.com/JedWatson/react-select/issues/927#issuecomment-31302287

0
ghashi