réagir-select focus () ne montre pas le curseur après le changement

voix
0

Je suis en train d'utiliser ref et mise au point () pour régler manuellement la mise au point dans le champ d'entrée de commande. Après avoir sélectionné une option dans le menu déroulant, le contrôle obtient le focus, mais le curseur ne semble pas. Cela ne se produit que la première fois. Sur les ouvertures ultérieures du menu, le curseur apparaît avec la mise au point de l'ensemble du champ de contrôle. Toute idée comment obtenir ce travail?

J'ai créé un exemple de code ici

entrez

Voici le 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));
Créé 24/10/2019 à 12:03
source utilisateur
Dans d'autres langues...                            


2 réponses

voix
1

Si je peux offrir une alternative au comportement que vous essayez d'atteindre, au lieu de se cacher le SelectCSS pourquoi pas seulement mount/ unmountelle?

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

Voici un exemple vivant de ma solution.

Créé 29/10/2019 à 04:06
source utilisateur

voix
0

Vous pouvez remarquer que le bogue existe aussi dans l' officiel réagissez-sélectionner des exemples . Même en cliquant sur le blurbouton après la sélection ne résout pas le problème.

Il y a probablement un petit différent dans le code lorsque l' utilisateur closesle menu et l' saves + automatically closesaction.

J'ai vu que vous avez ouvert une question sur GitHub. Gardons un oeil sur elle.

Créé 31/10/2019 à 20:21
source utilisateur

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