Reactjs 更改后，react select focus（）不显示光标

如上所述，我尝试使用ref和focus手动将焦点设置到控件输入字段中。在大多数情况下，它可以工作，但不能在从下拉列表中选择选项后立即工作

从下拉列表中选择一个选项后，控件将获得焦点，但光标不会出现。仅当您开始键入（包括按Esc键）时，才会显示此选项。在菜单的后续打开中，光标与整个控制字段的焦点一起出现。有什么办法让它工作吗

我在codesandbox.io中创建了一个示例代码

代码如下：

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

---

如果我可以提供一种替代您试图实现的行为的方法，而不是用css隐藏Select，那么为什么不直接挂载/卸载它呢

---

这是我的一个解决方案

您可以注意到，错误也存在于中。即使在选择后单击模糊按钮也不能解决问题

当用户关闭菜单并保存+自动关闭操作时，代码中可能有一点不同

---

我看到你在github上打开了一个。让我们密切关注它。

您使用的是什么浏览器？因为我刚刚在Chrome上试用了你的沙盒，一切正常，我可以像预期的那样一直看到光标。除了第一次选择后，works是否会准确地描述你的行为？请注意，react select示例中也存在此缺陷。我看到你在github上打开了一个问题。我将继续寻找解决方法。与您在问题中提供的方法相同！在这个例子中，这正是你的行为。把它作为一个答案，我将奖励这个答案。嗨，劳拉。这个想法当然很好，但在我的例子中，当下拉列表关闭并再次打开时，我需要记住列表的滚动位置。这应该是react select的固有功能，但不幸的是，关于这一点，github已经出现了一些问题，不再起作用。

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