search

braintree / restricted-input

Restrict <input>s to certain valid characters (e.g. formatting phone or card numbers)
https://braintree.github.io/restricted-input/
MIT License
68 stars 25 forks source link

format the input after change the keyboard on safari #93

Closed garbray closed 2 years ago

garbray commented 2 years ago

Description

When input method is set as [Japanese -Romaji] with Mac Safari, the card number is not separated 4 digits each, so the system does not recognize as a credit card number. As a result, it becomes an error. This issue is observed only in Mac Safari. Also, if a different IME is used, such as Google IME, the problem does not happen.

Why are we making these changes? Include references to any related Jira tasks or GitHub Issues

Jira ticket

Reproduction Steps (if applicable)

Reproduction steps are available in Jira ticket

Evidence

Solution

Since this problem is related to the keypress event listener is not attached on all browsers, in the same way, we need to handle a flag to know if the keypress event is present or not, in the case, the browser is not using the keypress event listener or change because the user changes his keyboard will use the input event listener as a fallback.

Before

https://user-images.githubusercontent.com/990207/158444429-217002e9-690b-4135-b1b4-c89bf9b4363c.mov

After

https://user-images.githubusercontent.com/990207/158446387-a2e26eb4-a966-484d-ad94-676509d29bbc.mov

jplukarski commented 2 years ago

@garbray Can you also add a CHANGELOG entry?