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 12:03
sursa de către utilizator
În alte limbi...                            


2 răspunsuri

voturi
1

Dacă eu pot oferi o alternativă la comportamentul pe care încercați să realizeze, în loc de a ascunde Selectcu css de ce nu doar mount/ unmountl?

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

Aici un exemplu viu de soluția mea.

Publicat 29/10/2019 la 04:06
sursa de către utilizator

voturi
0

Puteți observa că bug - ul există , de asemenea , în oficial reacþioneazã-selectați exemple . Chiar și faceți clic pe blurbutonul după selecția nu este rezolvarea problemei.

Există , probabil , un alt mic în codul atunci când utilizatorul closesmeniu și saves + automatically closesacțiune.

Am văzut că ați deschis o problemă pe GitHub. Să menținem un ochi pe ea.

Publicat 31/10/2019 la 20:21
sursa de către utilizator

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