Bug 275367 – The options items popover position are over the select element

• Component: Forms
• Status: RESOLVED INVALID

[Maximiliano José Sorribas]

Created attachment 471651 [details]
Screenshot of issue and the expected behavior

Description: 
The options items popover position are over the select element.

This issue is only on macOS.

Browsers affected: Safari, Google Chrome, Opera. 


Form element: select


HTML code example: 
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
  </select>

The expected behavior is: that the popover with options element will appear under the select element.

[Aditya Keerthi]

This is the intended macOS behavior, matching the native `NSPopUpButton`.

Marking as "Invalid" since that is our closest status to "Behaves Correctly".

[Maximiliano José Sorribas]

The behavior maybe should be similar to NSComboBox not NSPopupButton

https://developer.apple.com/documentation/appkit/nscombobox?changes=latest_major

Example:
https://docs-assets.developer.apple.com/published/a89a7a06e9/rendered2x-1696261392.png

The fact that the floating element is not aligned below the "Select" element does not allow to have websites with the same visual behavior on a cross-platform level.

It will always look different, forcing developers to create their own web components to avoid a different look. This situation ends in not wanting to use the native select under any circumstances. The team of Webkit should analyze and review this issue in the future.

[Alexey Proskuryakov]

The element that is equivalent to NSComboBox is datalist, not select.

Web developers are certainly free to design poor UI that looks wrong on macOS, if their primary goal is to have pages look the same everywhere. But preferably, developers will respect their users and platform conventions.