JedWatson / react-select

The Select Component for React.js
https://react-select.com/
MIT License
27.42k stars 4.1k forks source link

The select will not focus after clearing when openMenuOnClick is true #5895

Open pd2xts opened 2 months ago

pd2xts commented 2 months ago

Using the example below:

  1. Type "o".
  2. Select an option from the dropdown.
  3. Hit X to clear the selection.
  4. Click the control to begin typing again.

The control will not accept focus and no caret is visible, entering text is not possible.

To be able to enter text again, user must click elsewhere to blur the control and then click back into it.

If openMenuOnClick is true then this problem does not occur.

import React, { useState } from "react";
import Select from "react-select";

export default function App() {
  const [selectedOption, setSelectedOption] = useState("none");
  const options = [
    { value: "option1", label: "Option 1" },
    { value: "option2", label: "Option 2" },
    { value: "option3", label: "Option 3" },
  ];
  const handleTypeSelect = (e) => {
    setSelectedOption(e ? e.value : e);
  };

  return (
    <div>
      <Select
        options={options}
        onChange={handleTypeSelect}
        value={options.filter(function (option) {
          return option.value === selectedOption;
        })}
        label="Single select"
        isClearable
        openMenuOnClick={false}
      />
    </div>
  );
}