react-select - focused option resets on React state change

Question

I have a custom component wrapper around a react-select, but I've also noticed this same behavior in the react-select by itself as well. The behavior occurs when using react-select whenever the React state is updated, whether by the onChange function passed to the Select or by anything else.

When the Select component is outside of the React state, if I select an option and then reopen the Select, the selected option will be focused and keyboard navigation proceeds from the selected option. However, if the React state changes (thereby triggering a re-render), reopening the Select results in the first option being focused instead of the selected option.

I've tried passing both value and defaultValue to the Select, but neither seem to have had any effect on the focused option.

A basic TypeScript example using options from the react-select website:

https://codesandbox.io/p/devbox/react-typescript-forked-d3kccv?workspaceId=ws_X3VSCffFTxQAJFZ3oVrV7o

import "./styles.css";
import Select from "react-select";
import React, { useState } from "react";

type ColorOption = {
  value: string;
  label: string;
  color: string;
};

export default function App() {
  const [selectedColor, setSelectedColor] = useState<ColorOption>();

  const colorOptions: ColorOption[] = [
    { value: "ocean", label: "Ocean", color: "#00B8D9" },
    { value: "blue", label: "Blue", color: "#0052CC" },
    { value: "purple", label: "Purple", color: "#5243AA" },
    { value: "red", label: "Red", color: "#FF5630" },
    { value: "orange", label: "Orange", color: "#FF8B00" },
  ];

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Select
        options={colorOptions}
        value={selectedColor}
        onChange={(e: ColorOption) => {
          setSelectedColor(e);
        }}
      />
    </div>
  );
}

initial open

If I select Purple here and then reopen the Select, I would expect it to focus Purple and for the keyboard to navigate from there, which is what happens if the onChange function is removed and no re-render occurs. But instead, it focuses the first option.

open after select

I'm not able to reproduce it on a codesandbox. Could you please add a minimal reproducible example, — 0stone0
– 0stone0, Commented Sep 22 at 21:36

Alparslan ŞEN · Accepted Answer · 2025-09-22 19:06:30Z

0

You should use the value={selectedColor} prop instead of defaultValue. That makes the Select “controlled” so it will keep focus on the selected option even after re-renders.

answered Sep 22 at 19:06

Alparslan ŞEN

6961 gold badge7 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react-select - focused option resets on React state change

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related