Skip to content

[5.x]: Tabbing to empty money field, "locked" into decimals #18198

@redburn

Description

@redburn

What happened?

Description

When tabbing to an empty Money field (no 0,00 placeholder visible), keyboard users are initially "locked" into the decimals/cents position, with no way of entering any numbers before the separator except by tabbing back and then forth again to the same field, or by hitting the dot or comma key twice (which was new to me and most users probably won't know).

Here I'm simply tabbing to the field and entering 40, twice in a row, when the field is empty and when it's not:

Image

As you can see, when the field is empty, the cursor is placed on the far right and I can only enter 0,40 comfortably. When I tab back once and then back to the field, the cursor is placed at the front. (I would perhaps expect the 0 to be replaced by the 40, to create 40,40 given that 0 is nothing, instead of adding up to 400,40, but that's an easy edit.)

The Money field seems to be "initialized" on mouse click, at which point the 0,00 placeholder becomes visible. Once that's happened, tabbing to the field no longer causes any issues, so this only happens when the field is all empty.

Of course one could use the arrow keys to move the cursor, but you expect to be able to enter something like 10,50 straight away.

Steps to reproduce

  1. Add or edit an entry with an empty Money field
  2. Tab to the Money field from another element
  3. You are now "locked" into the decimal position
  4. Tab back to a previous element, then back to the Money field
  5. You are now able to use the field normally

Expected behavior

When entering the empty field through tabbing, the cursor should be positioned in front of the decimal separator, allowing normal use of the Money field, the same way it is when the empty field is clicked instead of tabbed to.

Actual behavior

The cursor is positioned at the end of the field and you cannot easily enter anything before the separator.

Craft CMS version

5.8.21

Metadata

Metadata

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions