reageer-selecteer nadruk () heeft cursor na verandering niet tonen

stemmen
0

Ik ben op zoek naar ref en de scherpstelling () gebruiken om de scherpstelling handmatig in te stellen in het veld stuuringang. Nadat u een optie te selecteren in het dropdown, de controle krijgt de focus, maar de cursor wordt niet weergegeven. Dit gebeurt alleen de eerste keer. Bij volgende openingen van het menu, de cursor verschijnt, samen met de focus van de gehele controle veld. Enig idee hoe dit werkend te krijgen?

Ik heb een voorbeeld code aangemaakt hier

voer

Dit is de code:

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));
De vraag is gesteld op 24/10/2019 om 13:03
bron van user
In andere talen...                            

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