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 12:03
bron van user
In andere talen...                            


2 antwoorden

stemmen
1

Als ik een alternatief voor het gedrag dat u probeert te bereiken, in plaats van het verbergen van de te bieden Selectmet css waarom niet gewoon mount/ unmounthet?

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>
    );
  }
}

Hier is een levend voorbeeld van mijn oplossing.

antwoordde op 29/10/2019 om 04:06
bron van user

stemmen
0

Je kunt merken dat het probleem bestaat ook in de officiële reageren selecteert voorbeelden . Zelfs klikken op de blurknop na de selectie het probleem niet oplossen.

Er is waarschijnlijk een klein anders in de code wanneer de gebruiker closeshet menu en saves + automatically closesactie.

Ik zag je een hebt geopend probleem op GitHub. Laten we houden een oogje in het zeil.

antwoordde op 31/10/2019 om 20:21
bron van user

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