What should happen when the user edits the expiration date for a credit card?
The UX for entering the month and year of a credit card expiration date can be tricky. I tried a few services (Netflix, Lyft, Uber) and found they were all buggy. Amazon avoids this by using drop-down fields. Cash App (from Square) avoids this by disallowing any edits except for backspacing from the end.
I've looked at related threads on this site and articles they link to, such as https://ux.stackexchange.com/a/98983 and The most intuitive way to input credit card expiry dates.
Some principles are widely accepted, such as automatically adding the / after the user types the first two digits. But I can't find anything addressing my question.
Suppose the user types in an expiration date like 06/30, representing June of 2030. Then the user realizes they meant to type in 07 for the month. They put the cursor right after the 6 and backspace. What do they see? I think the two main options are:
0/3003/0
These represent two different philosophies. #1 would treat month and day as separate fields that can be edited independently of each other. #2 would treat the expiration date as a single text field with a / after the second character.
Which is better UX? They both seem odd to the user, and would need less restrictive validation in editing than when originally typing.
If I was editing a phone number or social security number, I would use #2. It's clearly one field. In something like the Square Cash App, where credit card number and expiration and CVV are all displayed in a single row, those are clearly separate fields and I would expect #1 (although again, in their case, they don't allow moving the cursor and editing previous characters). If the month and year were physically in separate fields, they should be edited independently. But this case seems ambiguous.
If it matters, this is for an Android app.
What's better UX? #1, #2, or something else?