bug(aria/combobox): Select/Combobox non-functional in browsers without Popover API (Safari <17, Firefox <125)

[denisyilmaz]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

The @angular/aria select component (using ngCombobox + ngListbox + cdkConnectedOverlay with usePopover: 'inline') is completely non-functional in browsers that do not support the Popover API.

Symptoms:

1. Options are visible in the dropdown but clicking an option does not select it
2. The popup does not close after selection
3. Keyboard navigation (arrow keys) works, and Enter selects the option, but the popup still stays open

Root cause: The cdkConnectedOverlay with usePopover: 'inline' relies on the native Popover API (showPopover() / hidePopover()). In overlay-ref.ts, the calls are wrapped in a try-catch that silently swallows errors:

if (this._config.usePopover) {
  try {
    this._host["showPopover"]();
  } catch {}
}

Without the Popover API, the overlay falls back to rendering in the global cdk-overlay-container outside the ngCombobox DOM tree. Since the combobox's (click) handler is bound on its host element, click events from options in the external overlay container never bubble up to it — making selection via click impossible. Closing via hidePopover() also silently fails.

Browser support gap: Angular's stated browser support is based on https://web-platform-dx.github.io/web-features/, which includes Safari 16.4 and Firefox 112. However, the Popover API was introduced in Safari 17.0 and
Firefox 125, leaving a significant gap:

Browser	Angular baseline support	Popover API support
Safari	16.4	17.0
Firefox	112	125
Chrome	105	114

Note: #28769 originally requested feature detection with a dialog-element fallback, but the shipped implementation does not include one.

Reproduction

The official example at https://angular.dev/guide/aria/select reproduces this issue.
Steps:

1. Open the above URL in Safari 16.x (macOS Ventura) or Firefox < 125
2. Click the select dropdown — options appear
3. Click any option — nothing happens (no selection, popup stays open)
4. Try keyboard: arrow keys + Enter selects the value, but the popup remains open

Tested and confirmed in:

• Safari 16.0, 16.4, 16.6 (broken)
• Safari 17.0+ — works
• Firefox 112, 120, 124 (broken)
• Firefox 125+ — works

Expected Behavior

The @angular/aria select component should work in all browsers within Angular's stated support matrix, either by:

• Providing a fallback rendering strategy when the Popover API is unavailable (as originally suggested in feat(OVERLAY): All overlays should use the Popover API (once it reaches stable) #28769)
• Including or recommending a popover polyfill
• Documenting the Popover API as a hard requirement

Actual Behavior

Option click and popup close silently fail. The component is unusable without the Popover API.

Environment

• Angular: 21.x
• CDK: 21.x
• Browsers: Safari 16.x, Firefox < 125