1811187 - No easy way to clear the date field (was: Clear-Button in date-field removed)

Status: VERIFIED FIXED

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

Description

[Gabriel Gritsch]

Steps to reproduce:

Updated from FF 108 to 109 and the clear-button in date-fields is gone.
First it was possible to remove the date with one click, now it has to be done with multiple clicks and key-presses.
Thats not user-friendly!

Comment 1

[Rares Doghi, Desktop QA]

Hi Gabriel can you give us a website with a date field where the Clear button was present ? I will try to reproduce this issue on our side.

Comment 2

[Gabriel Gritsch]

As it depends on the version of FF, a website makes no sense. Otherwise its a simple <input type="date" />
See the uploaded images where I show the version-difference:

version 108:
https://ibb.co/hZqjHnY

version 109:
https://ibb.co/hBFGqqt

Comment 3

[Andre Klapper]

Both links are dead. Please upload images here in Bugzilla itself.

Comment 4

[Gabriel Gritsch]

Attachment: 108.png

Comment 5

[Gabriel Gritsch]

Attachment: 109.png

Comment 6

[Gabriel Gritsch]

Added the files directly in bugzilla.

Comment 7

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

:ayeddi, since you are the author of the regressor, bug 1676068, could you take a look? Also, could you set the severity field?

For more information, please visit auto_nag documentation.

Comment 8

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

This bug has the keyword regression, so its type should be defect.

Comment 9

[IagoSRL]

Close related, so I think is better to keep together and not in additional bugs:

• No "clear" button at the popup either
• The DEL key does not remove the date parts as before; only the BACK SPACE key.

Comment 10

[Anna Yeddi [:ayeddi]]

:Gabriel Gritsch and :IagoSRL,
thank you for providing the description to the expected behavior and the screenshots too.

The changes in the <input type=date> and <input type=datetime-local> were implemented in the bug 1676068 to provide more accessible experience to users with different abilities. This included making a date picker keyboard accessible and this requires managing keyboard focus appropriately. Usage of a calendar button within or, in customized cases, near the date field has been a standard pattern to show to users that there is, in fact, a calendar view available for them to use. It is especially important for users with cognitive difficulties, neurodiverse users, and users with dyslexia, because it does communicate it explicitly versus before the change a user would have to interact with the field in order to learn that there is a date picker provided. While cleaning out the field without a special button does make it more cumbersome for users, the calendar button provides more accessible experience for users facing more barriers than others. Plus, it allows Firefox to follow the gold standard of a design pattern for date inputs.

While we do not have yet a clear button on the date picker panel, we do have a bug opened to track if we can allow Delete/Backspace on a Calendar button key to clean the field - I also updated it with the idea to add an explicit button for that (but it would require UI change and UX team approval). Please do vote for that so it can be prioritized!

:IagoSRL, I tried to use Del key to clean the field on the Firefox 107.0.1 and 108.0.2 releases (pre-datepicker accessibility enhancement) and it did not do anything, only the backspace. Could you share which version do you see the delete key cleaning up the value?

Comment 11

[Gabriel Gritsch]

I understand that, but I see also that it makes it much more complicated for many other users to delete the content of the date field: 1 mouse click and 5 (!!!) keyboard interactions versus one single mouse click.
Previously it was also possible to open the date-picker clicking directly on the date. Now the user has to hit the small icon.

I have another question (maybe not the right place here): why does the change-event trigger on every keyup and not only on final change (when focus lost) like for textfields (there the change-event is not triggered on every key-event).

Comment 12

[Filip]

Hi all, for the sake of relevance I am stepping into this discussion to confirm the inability to clear date fields which is complicating the work. Now there is at least 5 or more steps with mouse and keyboard interaction to clear date field and let it empty. My work (Redmine) is heavily depending on setting and clearing date fields.
Compared to Chromium, the date fields have pop-ups there with the "CLEAR" button. So it is 2 clicks there.
In terms of user friendliness this change in latest FF seems kind of dead-end to me.

Comment 13

[Emilio Cobos Álvarez (:emilio)]

Adding a clear button to the picker seems reasonable to me. Something else might be worth it as well, so repurposing a little bit. Anna, can you make sure we loop UX in to address this asap?

Comment 14

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

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

Comment 15

[Anna Yeddi [:ayeddi]]

I can make a patch to clean the field up with Backspace and Delete on the Calendar button to clean up the entire field and add a Delete key handler (note that Firefox, for instance, 107.0.1 does not use Del).

This would provide a temporary workaround while we're working with the UX team on the solution (I did reach out to them earlier this week and am waiting for a feedback)

Comment 16

[IagoSRL]

(In reply to Anna Yeddi [:ayeddi] from comment #10)

Hi Anna. I think the new UI of the date-field is good and I appreciate the included accessibility enhancements, it's a step forward. I was just too concise on my previous message to focus on what I found could be better, I didn't expect to sound disregarding with the work on this, so I'm sorry for the confusion.

Could you share which version do you see the delete key cleaning up the value?
It's true that Delete did nothing in previous Firefox versions, but for some reason was my first trigger to try cleaning up de calendar without the Clear button. I tried Chrome and works there with both keys, so that may be part of the reason (they have a clear button inside the popup but I tend to use Delete when testing on that browser; users of my webapps tend to use buttons and only a few the delete button).

Maybe Delete could get the same behavior of Backspace (clear each part once at a time, as in other browsers), or may clear the whole date independently on which date part is focused, for a different useful behavior. Just a quick idea for UX discussion.
To clear all at the calendar button is fine as quicker fix but I found it less intuitive/discoverable.

Comment 18

[Anna Yeddi [:ayeddi]]

(In reply to Gabriel Gritsch from comment #11)

Previously it was also possible to open the date-picker clicking directly on the date. Now the user has to hit the small icon.

You can restore the previous behavior with something like: input.addEventListener("click", e => input.showPicker()) to show the picker on click anywhere on the input

I have another question (maybe not the right place here): why does the change-event trigger on every keyup and not only on final change (when focus lost) like for textfields (there the change-event is not triggered on every key-event).

:Gabriel Gritsch,
Do you mind opening a separate ticket for that in Core:: Layout: Form Controls? This behavior was implemented before the datepicker accessibility work so I am not familiar with the decision made here.

Comment 19

[Anna Yeddi [:ayeddi]]

(In reply to IagoSRL from comment #16)
Thank you very much for the follow up and for the ideas!

:Filip and :Gabriel Gritsch, thank you for your input too!

The keyboard shortcut is being worked in the bug 1806587:

• we have a patch, but we are confirming which shortcut would be more discoverable - so far the candidate is ctrl/cmd + Backspace/Delete
• the patch also adds Delete to follow the Backspace behavior of clearing each part at once
  This option, when finalized, can be shipped sooner.

For the on-screen UI change (i.e. adding a Clear button on the date picker panel) we are having a meeting with the UX team to discuss it and work on the next steps [Added: the meeting is early next week]. This option would take longer to implement than the keyboard shortcut.

I'll keep you all posted.

Comment 20

[Gabriel Gritsch]

I saw that other browsers trigger the change-event on every key-up so it may be ok also in FF.

Comment 21

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

(Just for convenience / easy testing: here's a quick testcase with a datetime widget.)

Comment 22

[Anna Yeddi [:ayeddi]]

While a button option is being discussed, the keyboard shortcut is implemented by the bug 1806587:

1. now it is possible to clear the focused date/time/datetime-local input by pressing Ctrl+Delete or Ctrl+Backspace on Windows and Linux and Cmd+Delete or Cmd+Backspace on MacOS
2. Also added support for Delete to clear a part of the input field (as it is done with a Backspace)

Comment 23

[Marcin Szewczyk (:wodny)]

Hi, "wontfix" for 111 and "fix-optional" for 112 seems worrying to me. Users at my company are already complaining about usability of Redmine after this regression. Lack of a "clear" button is a significant pain.

Comment 24

[Anna Yeddi [:ayeddi]]

(In reply to Marcin Szewczyk (:wodny) from comment #23)

Hi, "wontfix" for 111 and "fix-optional" for 112 seems worrying to me. Users at my company are already complaining about usability of Redmine after this regression. Lack of a "clear" button is a significant pain.

Hi Marcin, sorry to hear that.

I have a draft for the bug 1801911 that adds a Clear button to the date picker panel. The UI was approved by the UX and it is implemented, but it needs to become functional (needs a message from the panel to the input to clear the field out) and tests. If someone wants to pick the patch up to complete it, that would be great. Otherwise, I’m back from the baby bonding leave in early May and am planning to get back to it (unless I’ll have opportunity to do it while on the leave). I’ll be happy to mentor

Comment 25

[Emilio Cobos Álvarez (:emilio)]

Anna, could you update your WIP patch in that bug and ni? me? I'm happy to pick it up. Enjoy your leave, it's well deserved :)

Comment 26

[Anna Yeddi [:ayeddi]]

Attachment: Bug 1811187 - Add a clear button to the date picker panel. r?mconley,kcochrane,Jamie

Adding a button to the datepicker panel to clear the <input type=date>/<input type=datetime-local> value with two clicks total, as requested by users.

The visual appearance got a thumbs up from the UX for the current style of the browser provided picker UI.

Done:

• Visuals
• btn is hidden when month-year panel is opened
• month-year panel's style is tweaked a bit
• added Clear-specific tests and updated few previous tests

ToDo:

• make the button to clear the input's value (see ToDos)
• update previous tests (esp. with Tab navigation )

Comment 27

[Anna Yeddi [:ayeddi]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #25)

Anna, could you update your WIP patch in that bug and ni? me? I'm happy to pick it up. Enjoy your leave, it's well deserved :)

Thank you so very much for your help, @Emilio!
I pushed the WIP patch D170033 with some tests added, but there may be some other datetime testst that would need an extra Tab keypress to continue working. I can update them later on

Comment 28

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9de559474dda
Add a clear button to the date picker panel. r=fluent-reviewers,desktop-theme-reviewers,dao,flod

Comment 29

[Atila Butkovits]

Backed out for causing failures at browser_datetime_datepicker_markup.js

Backout link: https://hg.mozilla.org/integration/autoland/rev/7164e6857aa1ea97fefbef91187d3e290d508b9c

Push with failures: https://treeherder.mozilla.org/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception%2Cretry%2Cusercancel&revision=9de559474dda78da572098cddf3be734718bab56

Failure log: https://treeherder.mozilla.org/logviewer?job_id=406183823&repo=autoland&lineNumber=21412

Comment 30

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/dc06a60671bb
Add a clear button to the date picker panel. r=fluent-reviewers,desktop-theme-reviewers,dao,flod

Comment 31

[Serban Stanca [:SerbanS]]

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

Comment 32

[Anna Yeddi [:ayeddi]]

[Tracking Requested - why for this release]:
“Clear” button, newly added to the date picker panel, allows users to quickly clear the input with type “date“ or “datetime-local” and provides familiar experience across browsers.

Comment 33

[Rares Doghi, Desktop QA]

Verified as fixed in our latest build 112.0a1 (2023-02-20) The Celandar panel now has the Clear button which deletes every entry added.

Comment 34

[Anna Yeddi [:ayeddi]]

Release Note Request (optional, but appreciated)
[Why is this notable]:
The new button provides the experience that is nearly the same as for Chrome and Edge (we don’t have the Today button yet but other than that we’re visually on par), while the ensuring that the Fx date picker is accessible
[Affects Firefox for Android]:
No, the Android overwrites the date picker with its own native component
[Suggested wording]:
“Clear” button, newly added to the date picker panel, allows users to quickly clear the input with type “date“ or “datetime-local” and provides familiar experience across browsers.
[Links (documentation, blog post, etc)]:
N/a

Comment 35

[Pascal Chevrel:pascalc (PTO until April 26)]

Note added to our nightly release notes (in the Web Platform implementation section), thanks! Does this change needs to be documented on our developer release notes hosted on MDN via the dev-doc-needed keyword?

Comment 36

[Emilio Cobos Álvarez (:emilio)]

Not sure if MDN has documentation for features specific to the browser picker implementation. My guess is probably not.