1271482 - "display: inline-block" (or inline[-whatever]) on long list of <option>s makes their <select> container super-wide

Status: NEW

(Core :: Layout: Form Controls, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

STR:
 1. Load attached testcase.

EXPECTED RESULTS:
Dropdown menu should be about as wide as its widest option.

ACTUAL RESULTS:
Dropdown menu is extremely wide -- multiple viewport-widths wide. (It seems to be as wide as all of its options lined up side to side).

The key thing here is:
> option { display: inline-block }
...which apparently makes us do the wrong thing when computing the intrinsic width of the <select>.


This was originally reported at https://github.com/webcompat/web-bugs/issues/2541#issuecomment-218017490 for a dropdown on the front of https://offshoreleaks.icij.org/

I'm using Nightly 49.0a1 (2016-05-08)

Comment 1

[Daniel Holbert [:dholbert]]

I can also reproduce this in Nightly 12.0a1 (2012-01-01) (from over 4 years ago), so this is not a regression (or not a recent one, at least).

Comment 2

[Daniel Holbert [:dholbert]]

(The bug happens for any inline-flavored display value, BTW -- I tried "inline", "inline-flex", "inline-table" -- same results.

None of these actually put the <option> elements on a single line, but the <select> element seems to compute its intrinsic width *as if* they did.)