UX inconsistency: `allowInputToggle` does not open picker on tab-navigation focus as well

[lukasjuhrich]

I installed v6.0.0b7. The relevant stackblitz is here (@master).

tl;dr: If a website teaches me that a click opens the picker, my mind remembers this as “focusing the input field opens the picker”, but focusing via tab-navigation does not do that. This is unexpected.

---

Not clear whether UX bug (inconsistency) or feature request, but my reasoning is as follows.

The allowInputToggle: true option actually teaches the user not one, but two pieces of functionality:

1. Clicking on the input field (as well as the icon) reveals the picker
2. Clicking on the input field once more closes the picker again.

However, for input fields, while the specific action of a user might be a click, the intention behind that is to enter some data, i.e. we're actually trying to focus the element. Note that this is in contrast to other elements (such as links / buttons), where the intention often rather is to trigger an action.

Regarding feature 2, this is somewhat separate, and may potentially not even be discovered by some people, for instance if they are used to clicking anywhere else on the page or pressing escape. So the fact that this actually is a toggle is more of an implementation detail than a defining feature of this option.

…Back to feature 1. If our intent is to focus the element, we might as well do this with a tab navigation. More precisely, my internal workflow when using forms is this:

• I click the input field if it is the first input field
• I press tab if it is the successor to the input field I last edited.

These are two sides of the same coin, so IMO opening the picker in one case and not the other is unexpected behavior.

[Eonasdan]

the option name is allowInputToggle. I guess it makes more sense if I rename it to allowInputOpen and just make it open on click. I could add an event trigger when the input field is focused to do the same.

[thenatsky]

Tabbing to a field is quite a usual user behaviour, especially when there a fair number of fields.

The behaviour that I think would be good to have is that if the user tabs to the input (or any focus mechanism really), then the picker opens if it's not already open and closes if both the input and the picker lose focus.

[donv]

This issue also arises when using client side validation. The browser will put focus on a required date field, and the date picker should open for that field.

[Eonasdan]

Hello, please check this StackBlitz

[Eonasdan]

This has been released

[Antal1609]

This PR seems to break the allowInputToggle.

The picker only opens on every second click on the input field.

Please check this StackBlitz.