Closed Bug 1561787 Opened 3 months ago Closed Last month

readonly date input shows active clear x


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

67 Branch



Tracking Status
firefox70 --- fixed


(Reporter: ben, Assigned: emilio)


(Blocks 1 open bug)



(2 files)

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: )

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.

Component: Untriaged → Layout: Form Controls
Product: Firefox → Core

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

For more information, please visit auto_nag documentation.

Flags: needinfo?(mats)

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:

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.

Flags: needinfo?(mats)

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

Closed: 2 months ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1479708

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?

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

Ever confirmed: true
Priority: -- → P3
Resolution: DUPLICATE → ---
See Also: → 1479708

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.

Assignee: nobody → emilio
Pushed by
Make readonly date / time input clear button disabled. r=smaug
Closed: 2 months agoLast month
Resolution: --- → FIXED
Target Milestone: --- → mozilla70
Duplicate of this bug: 1578717
You need to log in before you can comment on or make changes to this bug.