web-dev-qa-db-fra.com

react-select: existe-t-il un moyen de supprimer le bouton à droite qui élargit la liste, au moins en mode asynchrone?

J'utilise AsyncSelect et je voudrais masquer le bouton fléché vers le bas à droite, celui qui affiche la liste des options.

Cela peut avoir du sens lorsqu'il existe des options par défaut. Mais c'est mon cas, je n'en ai pas, donc ce bouton n'a aucun sens dans ma situation.

Existe-t-il un moyen de le supprimer/le masquer, en mode async et sans options par défaut?

Ci-dessous le code

<AsyncSelect
  placeholder="Search ..."
  cacheOptions
  defaultOptions={false}
  value={this.state.currentValue} // Default to null
  loadOptions={this.fetchOptions}
  onChange={...}
  isClearable
/>

En outre, est-il possible de désactiver le fait que le composant affiche une liste vide lorsqu'il obtient le focus, et n'affiche les options correspondantes que si au moins un caractère est entré.

Désolé d'avoir demandé deux en un.

Merci d'avance.

javascriptreactjsreact-select
9
acmoune

Nous pouvons supprimer l'indicateur de liste déroulante en incluant DropdownIndicator: () => null dans la propriété des composants

<Select
   components={{ DropdownIndicator:() => null }}
 />
8
rajesh kumar

Pour développer la réponse de Rajesh Kumar, vous pouvez supprimer l'indicateur de liste déroulante et le séparateur d'indicateur (la ligne horizontale entre le texte de sélection et la flèche de liste déroulante) en utilisant ce qui suit:

<Select
    components={{ DropdownIndicator:() => null, IndicatorSeparator:() => null }}
/>
13
shlgug

EDIT: Ceci est pour une version plus ancienne.

Le style react-select est faisable mais vous devez sauter à travers quelques cerceaux.

Vous avez des éléments générés automatiquement que vous pouvez cibler pour styliser - https://react-select.com/styles#style-object

Pour trouver la clé de style de l'élément que vous souhaitez cibler, regardez ceci - https://github.com/JedWatson/react-select/issues/3135#issuecomment-432557568

^ Vous devez ajouter un className et classNamePrefix au composant pour voir ce qu'il est réellement. Leurs documents pourraient faire du travail, mais je vois un gros arriéré de problèmes et de relations publiques sur le repo, donc je pense que les chances sont minces que cela se produise bientôt.

Ensuite, vous pouvez styliser cette clé comme décrit - https://react-select.com/styles#provided-styles-and-state

1
sanjsanj