Do not render Select listbox children while it's closed

[acelaya]

This PR improves a little bit the Select's resources usage, by making sure nothing is rendered inside the listbox while it is closed.

The listbox itself needs to be kept in the DOM, for proper size calculations, and because the use of the Popover API requires a reference to be available.

However, all of its children can be safely unmounted and mounted again when opened, allowing them to have their own hooks and even handlers that are released as long as the listbox is closed.

The changes in the Select itself are minimal, but a few tests needed to be updated, as they were interacting with options while the listbox was closed, which doesn't work anymore.

Testing steps

Just a bit of sanity check in http://localhost:4001/input-select to verify everything keeps working as before.

Considerations

This change makes it a bit harder to debug issues with the Select, as the children are removed as soon as you try to inspect the DOM.

This was somewhat a problem already, as the listbox is closed when the focus is removed from it, so debugging was already a multi-step process.

I may add later something in the lines of debug={true} that disables a few behaviors in the Select and allows for an easier debugging in downstream projects if needed.

[acelaya]

We no longer need to manually return the focus to the button once the listbox is closed, because since the listbox content is removed, the focus is automatically returned to the button, which was the last focused element.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (51505f0) to head (c3e788a).
Report is 3 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #1762   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           67        67           
  Lines         1205      1203    -2     
  Branches       454       454           
=========================================
- Hits          1205      1203    -2     

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

[robertknight]

This change makes it a bit harder to debug issues with the Select, as the children are removed as soon as you try to inspect the DOM.

Chrome has an "Emulate focused page" feature in devtools specifically to help with this.

[acelaya]

This change makes it a bit harder to debug issues with the Select, as the children are removed as soon as you try to inspect the DOM.

Chrome has an "Emulate focused page" feature in devtools specifically to help with this.

Just tested it in http://localhost:4001/input-select. It works great!

[robertknight]

This PR improves a little bit the Select's resources usage, by making sure nothing is rendered inside the listbox while it is closed.

The primary motivation for the change is rendering efficiency, by avoiding the cost of rendering and diffing the vdom for a potentially large list of items.

[acelaya]

I have tested this change in client and LMS, including cases where dashboard filters loading fails and needs to be retried, and when multiple pages need to be loaded.

All works as expected, so I'll merge this.