JedWatson / JedWatson/react-select

The select will not focus after clearing when openMenuOnClick is true

Open
#5,895 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

issue/bug-unconfirmed
Dominant language
TypeScript
Stars
28k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the reported sequence with the provided React Select example, especially with openMenuOnClick={false}, and compare it with the true setting described in the issue. Done means that after clearing, clicking the control restores focus, shows a caret, and accepts typing without requiring an intermediate blur.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.