Skip to content
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

Merged

Conversation

KirilCycle
Copy link
Contributor

Defect Fixes

Fix #6632 ignore Tab and Enter pressing

Copy link

vercel bot commented May 17, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Ignored Deployments
Name Status Preview Comments Updated (UTC)
primereact ⬜️ Ignored (Inspect) Visit Preview May 17, 2024 3:26pm
primereact-v9 ⬜️ Ignored (Inspect) Visit Preview May 17, 2024 3:26pm

@KirilCycle
Copy link
Contributor Author

I can only reproduce the second bug in Firefox

Latest Firefox:

Screen.Recording.2024-05-17.at.16.03.30.mov

Latest version of Chrome:

Screen.Recording.2024-05-17.at.16.02.05.mov

I 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

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' &&
Copy link
Contributor Author

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

@melloware
Copy link
Member

melloware commented May 17, 2024

Why not just this...

                case 'Tab':
                case 'Enter': {
                    // allow these keys
                    break;
                }

basically if Enter or Tab just allow the key.

@KirilCycle
Copy link
Contributor Author

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

@KirilCycle KirilCycle marked this pull request as ready for review May 17, 2024 15:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a defect related to a specific component.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

OTPInput Keyboard Support in Forms
2 participants