Make sure selected option is focused when listbox is opened

[acelaya]

This PR fixes an unintended regression introduced by making options render only when the listbox is open.

We now make sure the tabIndex is 0 for the selected option, which will make useArrowKeyNavigation focus it the first time.

This worked before because the options were kept in the DOM, preserving their previously set tabIndex, but now we render them "from scratch" every time it is opened.

Before:

focus-option-broken-2024-11-05_14.01.59.mp4

After:

focus-option-fixed-2024-11-05_14.01.21.mp4

Testing steps

1. Check out this branch.
2. Go to http://localhost:4001/input-select
3. Using the keyboard, focus the first Select, then click ArrowDown to open the listbox. The first option should be focused.
4. Using arrows, move the focus to a different option, and select it by pressing Enter. The focus will return to the button.
5. Press ArrowDown again to open the listbox. The focused option should be the selected one.

If you follow these steps in main branch, you'll notice the first option is always focused when the listbox is opened, regardless of which one is selected.

[acelaya]

I forgot to add a test. Moving back to draft Done

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (986c9d5) to head (207342d).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #1768   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           67        67           
  Lines         1203      1204    +1     
  Branches       454       455    +1     
=========================================
+ Hits          1203      1204    +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.