Tengo una instancia de react-select con un componente de opción personalizada. Cuando selecciono una opción, el panel no se cierra. Tengo que hacer clic fuera de la selección para que suceda. ¿Hay algún tipo de accesorio global que pueda usar? Por ejemplo, en Reakit hay popover.hide (). No veo nada como esto en React-select cuando la consola registra los accesorios.

Aquí está mi código:

const CustomOption = ({children, onSelect, ...props}) => {
  return (
    <div>
      {children}
          <Chip
            label="SELECT ME"
            onClick={() => onSelect(props.data)}
          />
    </div>
  );
};

const MySelect = ({onSelect) => {
  const customOption = {
    Option: ({ children, ...props }) => <CustomOption {...{children, onSelect, ...props}} />};

  return (
        <Select
          isClearable={true}
          options={availableChoices}
          components={customComponents}
        />
  );
};

¡Gracias!

1
DoneDeal0 25 jun. 2020 a las 11:24

2 respuestas

Aquí está la solución: cuando usa componentes personalizados en React-Select, también necesita pasar la referencia. Entonces:

const CustomOption = ({children, onSelect, innerRef, innerProps, ...props}) => {
  return (
    <div ref={innerRef} {...innerProps}>
      {children}
          <Chip
            label="SELECT ME"
            onClick={() => onSelect(props.data)}
          />
    </div>
  );
};

const MySelect = ({onSelect) => {
  const customOption = {
    Option: ({ children, innerRef, innerProps,...props }) => <CustomOption {...{children, onSelect, innerRef, innerProps, ...props}} />};

  return (
        <Select
          isClearable={true}
          options={availableChoices}
          components={customComponents}
        />
  );
};
0
DoneDeal0 25 jun. 2020 a las 15:25
handleInputChange = input => {
    this.setState({ open: !!input });
}

<Select
    onInputChange={this.handleInputChange}
    menuIsOpen={this.state.open}
/>
0
Konstantin 25 jun. 2020 a las 09:26