Closed Bug 1561787 Opened 3 months ago Closed Last month

readonly date input shows active clear x

Categories

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

67 Branch
defect

Tracking

()

RESOLVED FIXED
mozilla70
Tracking Status
firefox70 --- fixed

People

(Reporter: ben, Assigned: emilio)

References

(Blocks 1 open bug)

Details

Attachments

(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: 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.

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

Flags: needinfo?(mats)

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

Status: UNCONFIRMED → RESOLVED
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.

Status: RESOLVED → REOPENED
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 emilio@crisal.io:
https://hg.mozilla.org/integration/autoland/rev/c2fe4f53bcd8
Make readonly date / time input clear button disabled. r=smaug
Status: REOPENED → RESOLVED
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.