facebook/react

Bug: `select` menu won't update highlight when options change

paalss opened this issue · 0 comments

If a <select>'s options changes (e.g. if options are loaded asynchronously) while the menu is open, the <select> won't re-examine its options to update its highlight position (selectedIndex).

In the Codesandbox example below, I have a select menu that will have its options swapped out 1 second after it receives focus. This is to simulate the fetch call that I'm doing in my real app.

React version: 19.0.0

Steps To Reproduce

Browser: Either use Google Chrome or Microsoft Edge, it's not reproducible in Firefox.

Browser versions:

  • Google Chrome – Version 131.0.6778.109 (Official Build) (64-bit)
  • Microsoft Edge – Version 131.0.2903.86 (Official build) (64-bit)
  1. Open this Codesandbox
  2. Click on the select menu
  3. Watch as the complete options list replaces the old one

1 image 2 image 3 image

The current behavior

When the new options replaces the old ones, the highlight position stays on the first element. Only after closing and re-opening the menu, the highlight goes to the option with value="italy"

The expected behavior

I want the select menu to highlight the value="italy" option after options are replaced