datalist is not working on input type=time or type=date
Categories
(Core :: Layout: Form Controls, defect)
Tracking
()
People
(Reporter: dmalmald, Unassigned)
References
(Blocks 1 open bug)
Details
Attachments
(3 files)
vivaldi-datalist-behaviour.png
Steps to reproduce:
Using Firefox 127.0.2 (64-Bit) on Windows 10 Home
Try this HTML:
<!DOCTYPE html>
<html>
<body>
<h1>Testing datalist</h1>
<label>
<p>Just input, no type</p>
<input list="list" name="input" id="input">
</label>
<datalist id="list">
<option value="Something">
<option value="Another">
<option value="Else">
<option value="Nothing">
<option value="Again">
</datalist>
<label>
<p>input type=text</p>
<input type="text" list="list2" name="text" id="text">
</label>
<datalist id="list2">
<option value="Something">
<option value="Another">
<option value="Else">
<option value="Nothing">
<option value="Again">
</datalist>
<label>
<p>input type=date</p>
<input type="date" list="list3" name="date" id="date">
</label>
<datalist id="list3">
<option value="2024-01-02">
<option value="2025-05-05">
<option value="2000-12-20">
<option value="1999-09-09">
<option value="1800-01-01">
</datalist>
<label>
<p>input type=time</p>
<input type="time" list="list4" name="time" id="time">
</label>
<datalist id="list4">
<option value="00:00">
<option value="08:08">
<option value="10:10">
<option value="15:15">
<option value="23:23">
</datalist>
</body>
</html>
Actual results:
The options in the datalist will be available in a dropdown only on the "plain" input field and the "type=text" input field. There is no dropdown for "date" or "time"
Expected results:
There should be a dropdown to select the options for "date" and "time" as well.
|
||
Comment 1•4 months ago
|
||
Hello, thank you for the bug report!
Managed to reproduce this issue on:
- Firefox Nightly 129.0a1;
- Firefox 128.0b9;
- Firefox 127.0.2;
Tested and reproduced on:
- Windows 10;
- Ubuntu 22;
- macOS 14;
Moving the Product to ‘Core’ and Component to ‘Layout: Form Controls’. Please change if there’s a better fit, thank you.
Setting as NEW so the developers can have a look.
|
|
||
Comment 2•4 months ago
|
||
|
||
Updated•4 months ago
|
|
||
Comment 3•4 months ago
|
||
I'm not sure how a datalist would be expected to interact with the input types date and time that have their own forms of pop-up UI.... it seems like this could be a clumsy user experience.
Given that a datalist isn't supposed to block the user from entering arbitrary inputs, how do you envisage it appearing in conjunction with the calendar or the structured time UI?
Do other browsers support such a UI? In a brief test, I'm not seeing it in either Safari or Chrome.
This is how Vivaldi does it right now
See the image above, Vivaldi (a chromium-based browser) does offer a dropdown for date and time.
See also this comment
The arrow shows up on hover, or when you tab into the field.
On input type=date and input type=time, Chromium does not show an arrow, which is inconsistent. But if you click the calendar or clock symbol, the options from the list show up with a new item added to the end that says "Other..." (or similar). When you select that, the usual date / time picking interface will show up.
I think something like this could also work on the other input types. In case of text or url, choosing "Other..." could just empty the input field and let you start typing.
It's not perfect user experience, e.g. there are no visible changes when hovering over a "date" or "time" field that would indicate that you can pick a predefined value there. But it works, and FF could do it even better ;-)
This is a more complete test for fields using datalist. The handling of "supplemental text" with the option tags or the "label=xy" attribute also differs between Firefox and Vivaldi
|
||
Comment 7•4 months ago
|
||
Thanks! With the testcase in comment 6, I do see the behavior difference vs. Chromium.
- Chrome offers a datalist dropdown-menu for every displayed field (using the calendar/clock icons rather than a dropdown arrow, for date/time inputs)
- Safari and Firefox both offer a datalist dropdown-menu for text, number, url, email, tel (but not date/time). In Safari, there's an explicit downarrow button that you can click. In Firefox, you click the field twice to show the dropdown-menu.)
Safari and Firefox do not currently have any way to show the datalist as an autocompletion suggestion for date or time inputs, unlike Chromium.
I'm testing:
Chrome 128.0.6585.0 (Official Build) dev (64-bit)
Safari 17.3
Firefox Nightly 130.0a1 (2024-07-16) (64-bit)
Description
•