Bug 252038 – <option> not rendered when <datalist> is attached to <input type="range">

• Status: NEW
• Component: Forms

[Ana Tudor]

Created attachment 464938 [details]
Expected result, which is also the result in Firefox & in Chromium browsers.

Consider a `<datalist>` tied to a range `<input>`:

```
<div role='group' aria-label='slider with ruler'>
	<input type='range' list='l'/>
	<datalist id='l'>
		<option value='0' label='min'></option>
		<option value='25'></option>
		<option value='50' label='mid'></option>
		<option value='75'></option>
		<option value='100' label='max'></option>
	</datalist>
</div>
```

Make the `<datalist>` a grid with 5 columns:

```
datalist {
	display: grid;
	grid-template-columns: repeat(5, 2em)
}
```

This does nothing in Safari (tested via Epiphany on Ubuntu), while in Firefox and Chromium browsers, it displays the `<option>` elements underneath the slider.

Live minimal test: https://codepen.io/thebabydino/pen/PoBrVpR

Because the `<datalist>` is tie to the range `<input>`, I've been using it to code "sliders with rulers" designs.

Example #1: https://codepen.io/thebabydino/pen/PwOPMG

Example #2: https://codepen.io/thebabydino/pen/myqpow

[Radar WebKit Bug Importer]

<rdar://problem/105589354>