reacționează-select de focalizare () nu arată cursorul după schimbare

voturi
0

Am încercat să folosească ref și focalizare () pentru a seta manual focalizarea în câmpul de intrare de control. După selectarea unei opțiuni din meniul derulant, controlul devine punctul central, dar cursorul nu apare. Acest lucru se întâmplă doar prima dată. La deschideri ulterioare ale meniului, cursorul apare alături de punctul central al întregului câmp de control. Orice idei cum pentru a obține acest lucru?

Am creat un cod de probă aici

introduceți

Acesta este codul:

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));
Întrebat 24/10/2019 la 13:03
sursa de către utilizator
În alte limbi...                            

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