DEV Community

Devanshu Biswas
Devanshu Biswas

Posted on

Five of Eight Input Masks Pass Every Test, Four of Those Five Are Wrong, and Backspace Does Nothing in Exactly Three Places

An input mask writes the spaces into a card number for you. One integer to settle after every keystroke: where the caret goes.

The three things everybody tests:

  • it always looks like the mask
  • it never keeps a character the mask forbids
  • typing the number straight in produces the formatted number

Across 25,640 keystrokes, enumerated exhaustively on six masks, all three hold for five of eight implementations.

Four of those five are wrong.

Try it: https://dev48.infy.uk/design/day75-input-mask.html

The caret

The most-shipped implementation puts the caret after the digit the user left it after, rather than after the digit they typed — on 14.8% of keystrokes. Every property above still holds; the field still looks right in a screenshot. It just quietly moves your cursor while you are typing.

Three places where Backspace does nothing

Worse, and stranger:

On a full card there are exactly 3 positions where pressing Backspace has no effect at all.

The count is predictable from the mask alone — no implementation appears in the argument — and it was matched on all six masks. The caret sits after a separator, Backspace deletes the separator, the mask immediately puts it back, and the caret lands where it started. The user presses a key and the universe declines.

4111 1111 1111 1111
        ^ caret here: Backspace deletes " ", mask re-inserts " ", caret returns
Enter fullscreen mode Exit fullscreen mode

What the tests do reject

Three implementations fail the property tests: the control, a genuinely broken one, and one that is correct in every way that matters. That third rejection is the interesting one — the test suite is not merely blind, it is actively wrong about which implementation to keep.

Verifier 447 asserts, 144 in-page bounds and identities, 0 failures.

Top comments (0)