reagire-select fuoco () non mostra cursore dopo modifica

voti
0

Sto cercando di usare ref e messa a fuoco () per impostare manualmente la messa a fuoco nel campo di ingresso di controllo. Dopo aver selezionato un'opzione dal menu a discesa, il controllo ottiene l'attivo ma non compare il cursore. Questo avviene solo la prima volta. Alle successive aperture del menu, il cursore viene visualizzato con il focus dell'intero campo di controllo. Delle idee come ottenere questo lavoro?

Ho creato un codice di esempio qui

entrare

Questo è il codice:

import React, { Component } from react;
import ReactDOM from react-dom;
import Select from react-select;
import styled from styled-components;

import { stateOptions } from ./data.js;

class PopoutExample extends Component {
  selectRef = React.createRef();

  state = {
    isOpen: false,
    option: undefined,
  };

  toggleOpen = () => {
  const isOpening = !this.state.isOpen;
  this.setState(
    {
      isOpen: isOpening,
    },
() => isOpening && setTimeout(() => this.selectRef.focus(), 400),
);
};

onSelectChange = option => {
  this.toggleOpen();
  this.setState({ option });
};

render() {
  const { isOpen, option } = this.state;
  return (
    <Dropdown
      target={
        <MainButton onClick={this.toggleOpen}>
          {option ? option.label : Select a State}
        </MainButton>
      }
    >
      <Select
        menuIsOpen
        ref={ref => {
          this.selectRef = ref;
        }}
        styles={{
          container: provided => ({
          ...provided,
          display: isOpen ? block : none,
        }),
        }}
        onChange={this.onSelectChange}
        options={stateOptions}
        value={option}
        controlShouldRenderValue={false}
      />
    </Dropdown>
  );
}
}

const MainButton = styled.button`
  padding: 10px;
  background-color: aqua;
  width: 100%;
`;

const Dropdown = ({ children, target }) => (
  <div>
    {target}
    {children}
  </div>
);

ReactDOM.render(<PopoutExample />, document.getElementById(root));
È pubblicato 24/10/2019 alle 12:03
fonte dall'utente
In altre lingue...                            


2 risposte

voti
1

Se posso offrire un'alternativa al comportamento che si sta cercando di raggiungere, invece di nascondere la Selectcon i CSS perché non basta mount/ unmountessa?

class PopoutExample extends Component {
  state = {
    isOpen: false,
    option: undefined
  };

  toggleOpen = () => {
    this.setState({
      isOpen: !this.state.isOpen
    });
  };

  onSelectChange = option => {
    this.setState({ option, isOpen: !this.state.isOpen });
  };

  render() {
    const { isOpen, option } = this.state;
    return (
      <Dropdown
        target={
          <MainButton onClick={this.toggleOpen}>
            {option ? option.label : "Select a State"}
          </MainButton>
        }
      >
        {isOpen && (
          <Select
            autoFocus
            menuIsOpen
            onChange={this.onSelectChange}
            options={stateOptions}
            value={option}
            controlShouldRenderValue={false}
          />
        )}
      </Dropdown>
    );
  }
}

Ecco un esempio vivo della mia soluzione.

Risposto il 29/10/2019 a 04:06
fonte dall'utente

voti
0

Si può notare che il bug esiste anche nella ufficiali reagiscono-selezionare esempi . Anche cliccando sul blurtasto dopo la selezione non è risolvere il problema.

C'è probabilmente un piccolo diverso nel codice quando l'utente closesil menu e saves + automatically closesl'azione.

Ho visto che hai aperto un problema su github. Teniamo un occhio su di esso.

Risposto il 31/10/2019 a 20:21
fonte dall'utente

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more