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 13:03
fonte dall'utente
In altre lingue...                            

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