αντιδρά-επιλέξτε εστίασης () δεν εμφανίζει δρομέα μετά την αλλαγή

ψήφοι
0

Προσπαθώ να χρησιμοποιήσετε διαιτητή και εστίασης () για να ρυθμίσετε χειροκίνητα την εστίαση στο πεδίο εισαγωγής ελέγχου. Αφού επιλέξετε μια επιλογή από το αναπτυσσόμενο μενού, ο έλεγχος παίρνει την εστίαση, αλλά ο δρομέας δεν εμφανίζεται. Αυτό συμβαίνει μόνο την πρώτη φορά. Στις επόμενες ανοίγματα του μενού, ο δρομέας εμφανίζεται μαζί με το επίκεντρο ολόκληρου του πεδίου ελέγχου. Οποιεσδήποτε ιδέες για το πώς να πάρει αυτό εργασίας;

Έχω δημιουργήσει ένα δείγμα κώδικα εδώ

εισάγετε

Αυτός είναι ο κώδικας:

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));
Δημοσιεύθηκε 24/10/2019 στις 12:03
πηγή χρήστη
Σε άλλες γλώσσες...                            


2 απαντήσεις

ψήφοι
1

Αν μπορώ να προσφέρω μια εναλλακτική λύση για τη συμπεριφορά που προσπαθείτε να επιτύχετε, αντί να κρύβεται η Selectμε CSS γιατί όχι μόνο mount/ unmountαυτό;

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

Εδώ ένα ζωντανό παράδειγμα της λύσης μου.

Απαντήθηκε 29/10/2019 στις 04:06
πηγή χρήστη

ψήφοι
0

Μπορείτε να παρατηρήσετε ότι το bug υπάρχει και στην επίσημη αντιδρά-επιλέξτε παραδείγματα . Ακόμη και κάνοντας κλικ στο blurκουμπί μετά την επιλογή δεν λύνει το πρόβλημα.

Υπάρχει ίσως μια μικρή διαφορετικά στον κώδικα όταν ο χρήστης closesτο μενού και saves + automatically closesδράση.

Είδα έχετε ανοίξει ένα θέμα στο GitHub. Ας κρατήσει ένα μάτι σε αυτό.

Απαντήθηκε 31/10/2019 στις 20:21
πηγή χρήστη

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