1816134 - <datalist> creates a dropdown when tied to <input type="range">

Status: VERIFIED FIXED

(Toolkit :: Form Manager, defect, P2)

Description

[Ana Tudor]

Attachment: datalist_dropdown_ff.gif

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/111.0

Steps to reproduce:

1. Create a range input with a datalist tied to it:

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

2. Make the datalist a 3 column grid in order to create a ruler with labels made out of the options for the slider:

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

3. At first, all seems fine.

Actual results:

But when dragging the slider to change the value from a value without an option[label] corespondent to one with an option[label] correspondent, we get a dropdown covering the rendered option elements making up the slider ruler.

Live test https://codepen.io/thebabydino/pen/poZXqQO

Expected results:

The dropdown should not appear in this case as the datalist is not tied to a text or search input, but to a range one. This is what happens in Chromium browsers.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Disability Access APIs' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Now we support tick marks for the native rendering, not showing the popup probably makes sense.

Comment 3

[Zach Hoffman [:zrhoffman]]

Attachment: Non-text controls that show a suggestions popup

Looks like it's not only range controls: Buttons, checkboxes, and radio buttons also show a popup as of 2c8ff4622a78 (see testcase Non-text controls that show a suggestions popup). I think only single-line text controls are expected to show a popup.

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1767250

Comment 5

[Zach Hoffman [:zrhoffman]]

:issammani, since you are the author of the regressor, bug 1767250, could you take a look?

Comment 6

[Sergey Galich [:serg]]

Attachment: Bug 1816134 - show datalist in autocomplete for text controls only r=#credential-management-reviewers

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/72307e7cda84
show datalist in autocomplete for text controls only r=credential-management-reviewers,dimi

Comment 8

[Marian-Vasile Laza]

https://hg.mozilla.org/mozilla-central/rev/72307e7cda84

Comment 9

[BugBot [:suhaib / :marco/ :calixte]]

The patch landed in nightly and beta is affected.
:serg, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
• If no, please set status-firefox112 to wontfix.

For more information, please visit auto_nag documentation.

Comment 10

[Bogdan Maris, Desktop QA]

Reproduced the initial issue described in comment 0 using an old Nightly before the fix, verified that using latest Firefox 113.0b8 across platforms (macOS 13, Ubuntu 22.04 and Windows 10) the dropdown with the values are no longer displayed when changing the input.