[fields] Navigating between data and time value when clearing using Backspace

[emargin]

Summary

The new version of DatePicker v6+ introduces new behavior for handling date and time values ​​using arrows. At the same time, the behavior of clearing input also began to work differently, being limited to a specific section

Examples

Problem: When entering a time like 12:45 PM and trying to clear the input field using the BACKSPACE key, my focus is locked within each category. In total, my path to clearing a field looks like this:
BS BS <- BS BS <- BS BS*

Expected Behavior: When deleting a value from a TimePicker/ DatePicker I want the focus to automatically move to the next section, then my clear path would look like: BS BS BS BS BS BS*

• BS - backspace click

• <- left arrow click

Motivation

Make the user experience more expected and shorter

Search keywords: TimePicker, DatePicker, clearing TimePicker/ DatePicker
Order ID: #49335

[michelengelen]

Hey @emargin
Thanks for raising this issue.
I just tried it myself and would say you are partially right.

Take this example (** represents selected):

10/23/2024 06:05 PM
**

If you want to clear this field with Backspace from the front (MM) i would expect it to keep the focus on the month.

MM/23/2024 06:05 PM
**

But what about if you select the year (as an example):

10/23/2024 06:05 PM
      ****

Would you expect the focus to shift left like this?

10/23/YYYY 06:05 PM
   **

What about using DEL? Should the focus stay on that date part if using it? Or should it move as well?

---

@LukasTy This is quite an interesting topic. WDYT?

[LukasTy]

This is an interesting idea that would be worth discussing.
I do agree that compared to regular input, the value removal process is now a bit more cumbersome.
However, the behavior is the same on native <input type="date" /> element.
Also, our implementation supports the Cmd/Ctrl+A -> Backspace/Del for clearing the whole value, that helps in cases where users might also expect this from an input element.

I'm adding this issue to the board so that we can discuss if having extra behavior here makes sense. 👌

[flaviendelangle]

The problem with just moving to the previous section is that is makes the experience very bad when you actually want to change just one section by remove its value and then typing (which is not the best way of doing it but probably something a lot of people are doing).

Not sure what the best UX would be in this scenario honestly...
The fact that the built-in browser date input does the same thing as us means that it's not just a mistake on our side, but the browser is not always right and sometime the best UX is different to the one they chose.

This one is clearly a product choice, not a technical one, switching to the previous section is trivial is we decide to do it.

[LukasTy]

Great insights @flaviendelangle. Those are exactly my fears and thoughts.
I would be hesitant simply adding the section move behavior on delete action.
One option could be to move to the previous/forward section when Backspace/Del is typed on an already empty section, just like the author mentioned, for DateField you would type 5 times instead of 3.

Given:

04/17/2022
      ****  

When 1st Backspace is typed:

04/17/YYYY
      ****  

When 2nd Backspace is typed:

04/17/YYYY
   **  

When 3rd Backspace is typed:

04/DD/YYYY
   **  

When 4th Backspace is typed:

04/DD/YYYY
**  

When 5th Backspace is typed:

MM/DD/YYYY
**  

[flaviendelangle]

One option could be to move to the previous/forward section when Backspace/Del is typed on an already empty section

This one is probably quite safe to implement indeed

[emargin]

@LukasTy @flaviendelangle i'd try to implement this if you do not mind and provide me some assistment

[flaviendelangle]

Sure, thanks for proposing!

The code for the Delete key is here (if we want to also apply the change to this key)

And for the Backspace, I spoke too fast, it's not that trivial 😆
The logic is here for the new input and here for the old one.