Problem

Dropdown options were always mounted in the DOM, hidden via display: none
on the Floating UI container. Headless UI's DOM-order sort ran against
elements in a hidden subtree on page load, producing an unreliable option
order. On first open, goToOption couldn't resolve the correct active index
and the first few arrow-down presses had no visible effect.

Fix

• Conditionally render the portal only when open ({open && createPortal(...)})
  so options mount, register, and sort against visible DOM elements
• Switch SelectOption from as={Fragment} to as="li" so HUI owns the
  element and sets data-active natively
• Add tabIndex={-1} to the floating container to exclude it from sequential
  keyboard focus order

Closes #1781

Test plan

• Open Select via keyboard, first arrow-down immediately highlights item 1
• Open Select via mouse, item 1 (or selected item) is highlighted immediately on open
• Arrow-up/down, Enter, Escape, Tab all behave correctly
• Multi-select keyboard navigation works
• No visual regressions in Select stories

Checklist

• I have performed a self-review of my code.
• I have commented my code, particularly in hard-to-understand areas.
• I have added tests that prove my fix is effective or that my feature works.
• New and existing unit tests pass locally with my changes.
• I have made corresponding changes to the documentation (if applicable).
• My changes generate no new warnings or errors.
• I have created a changeset for my changes.

PR Manifesto

Review the PR Manifesto for best practises.