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)
- Open this Codesandbox
- Click on the select menu
- Watch as the complete options list replaces the old one
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