-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix #6632 InputOtp keyboard navigation #6638
Fix #6632 InputOtp keyboard navigation #6638
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 2 Ignored Deployments
|
I can only reproduce the second bug in Firefox Latest Firefox: Screen.Recording.2024-05-17.at.16.03.30.movLatest version of Chrome: Screen.Recording.2024-05-17.at.16.02.05.movI have checked other UI libraries like MUI, Chackra, ant-desing and they all behave the same, I also noticed that this error appears in some specific tag combinations, for example the ant-desing example works fine until I remove the h5 title inside container input-otp |
components/lib/inputotp/InputOtp.js
Outdated
if ((props?.integerOnly && !((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(event.key) >= 0 && Number(event.key) <= 9)) || (tokens.join('').length >= props.length && event.code !== 'Delete')) { | ||
//Ignore Enter and Tab pressing and Prevent non-numeric characters from being entered if integerOnly is true or if the length of the input is greater than the specified length | ||
if ( | ||
event.code !== 'Tab' && |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It is better to put it in separate cases to make it look cleaner
Why not just this... case 'Tab':
case 'Enter': {
// allow these keys
break;
} basically if Enter or Tab just allow the key. |
Yes, i noticed that |
Defect Fixes
Fix #6632 ignore Tab and Enter pressing