Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
pd2xts opened this issue Apr 25, 2024 · 0 comments
Open

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

pd2xts opened this issue Apr 25, 2024 · 0 comments
Labels
issue/bug-unconfirmed Issues that describe a bug that hasn't been confirmed by a maintainer yet

Comments

@pd2xts
Copy link

pd2xts commented Apr 25, 2024

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>
  );
}
@pd2xts pd2xts added the issue/bug-unconfirmed Issues that describe a bug that hasn't been confirmed by a maintainer yet label Apr 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
issue/bug-unconfirmed Issues that describe a bug that hasn't been confirmed by a maintainer yet
Projects
None yet
Development

No branches or pull requests

1 participant