1561787 - readonly date input shows active clear x

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect, P3)

Description

[ben]

Attachment: Screenshot from 2019-06-27 12-00-24.png

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

Steps to reproduce:

When using the html5 type="date" on an input, Firefox adds a UI element within the input the triggers a clear of that input. These inputs can be marked as readonly or disabled like so:

<input type="date" value="2019-05-05"/> <br />
<input type="date" readonly="readonly" value="2019-05-05"/><br />
<input type="date" disabled="disabled" value="2019-05-05"/>
(Available in a codepen: https://codepen.io/anon/pen/zVEyrj )

Actual results:

For readonly elements, the background is greyed out like disabled, but the clear x does not change appearance from non-readonly elements, suggesting to the user that this element can still be used.

Clicking the X does not trigger any behaviour.

Expected results:

I would expect the clear x colour to change to match the disabled styling so the user can visually see it's not usable or for it to disappear.

Alternatively, a CSS workaround that would allow removal of the x by developers is something that's been asked for in a few StackOverflow threads.

Comment 1

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

The priority flag is not set for this bug.
:mats, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 2

[Jonathan Kew [:jfkthame]]

This may be more of a Toolkit issue than Layout, I think. The reset button in the date input element seems to be styled here:
https://searchfox.org/mozilla-central/rev/40e889be8ff926e32f7567957f4c316f14f6fbef/toolkit/content/widgets/datetimebox.css#47-56

Presumably we want to change the fill color (to GrayText?) when the element is read-only, but I'm not sure exactly how to go about specifying that... moving this to Toolkit for further attention.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

This is bug 1479708, and someone is working on it :)

Comment 4

[Jonathan Kew [:jfkthame]]

Great! I see bug 1479708 is about a "required" date, though, while this was about a "readonly" element; will the fix there address both cases?

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Ah, good point, I missed that, should need to read more carefully. It's probably a pretty similar change though.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1561787 - Make readonly date / time input clear button disabled. r=smaug

The time input widget was missing a call to updateEditAttributes which was
caught by the test, which can be seen without this patch by going to:

data:text/html,<input type="time" disabled value="20:40">

Toggling the 'disabled' attribute back and forth fixes the rendering.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c2fe4f53bcd8
Make readonly date / time input clear button disabled. r=smaug

Comment 8

[Dorel Luca [:dluca]]

https://hg.mozilla.org/mozilla-central/rev/c2fe4f53bcd8