feat(input-otp): add new input-otp component #30386
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
github-actions
bot
added
package: core
|
Thank you, @brandyscarney, for your work on this component. One feature suggestion: pressing CTRL+A (or CMD+A on macOS) inside the component could select and clear all input fields at once. This would align with common input behavior and improve UX for users needing to re-enter their code quickly. Example: https://input-otp.rodz.dev/ |
| <div class="grid"> | ||
| <div class="grid-item"> | ||
| <h2>Default</h2> | ||
| <ion-input-otp> Didn't get a code? <a href="#">Resend the code</a> </ion-input-otp> |
There was a problem hiding this comment.
I found the following bug:
- I type "5" and "3" with the keyboard
- I highlight "5" with the mouse
- I press the
BACKSPACEkey on the keyboard - Now the OTP has "3" and "3"
I would expect to only see the "3" in the first input.
Screen.Recording.2025-05-21.at.11.09.17.AM.mov
There was a problem hiding this comment.
Can you tell me what browser you used or how you reproduced this? I am not able to reproduce in Chrome or Firefox:
input-otp-bug.mp4
There was a problem hiding this comment.
Weird, I can't replicate it anymore. 🤔 It was Firefox, maybe there was a patch on the browser.
| <h2>Default</h2> | ||
| <ion-input-otp> Didn't get a code? <a href="#">Resend the code</a> </ion-input-otp> | ||
| <ion-input-otp length="2"> Didn't get a code? <a href="#">Resend the code</a> </ion-input-otp> | ||
| <ion-input-otp id="numberValue" length="6"> |
There was a problem hiding this comment.
When I highlight the "3" and type "6", the "3" is replaced with "6". This makes sense.
But when I highlight "6" and paste my "123" value, the "123" value is placed after the "6". I would expect the "6" to be replaced with "123" -> "12123"
Screen.Recording.2025-05-21.at.11.26.17.AM.mov
What is the correct expectation?
There was a problem hiding this comment.
I took a look at what some of the other libraries do, and it seems that I am not handling this the right way. Other libraries always paste from the 1st input, no matter how many input boxes have text in them. I have updated this behavior & the tests and will update it in the documentation. Let me know if you disagree with this approach or if you'd like me to send you some examples from the other libraries!
The fix: 8c29200
There was a problem hiding this comment.
No complaints from me since it follows how other libraries do it! Thank you!
.../test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-ios-ltr-Mobile-Chrome-linux.png
Outdated
Show resolved
Hide resolved
...shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-large-ios-ltr-Mobile-Safari-linux.png
Outdated
Show resolved
Hide resolved
packages/angular/test/base/src/app/lazy/inputs/inputs.component.html
Outdated
Show resolved
Hide resolved
packages/angular/test/base/src/app/lazy/form/form.component.html
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
It might be best to make these changes in a separate PR.
There was a problem hiding this comment.
It might be best to make these changes in a separate PR.
There was a problem hiding this comment.
Why are these changes needed?
Issue number: internal
What is the current behavior?
In order to re-create an OTP Input component users have to custom style an
<ion-input>, possibly multiple, to get the design and functionality they want.What is the new behavior?
ion-input-otpwhich provides the OTP input functionalitytypewhich determines whether the boxes accept numbers or text/numbers and determines the keyboard to displayinputmodepropertylengthproperty to control the number of input boxesfill,shape,size,colorseparatorsproperty to show a separator between 1 or more input boxesdisabled,readonlyand invalid statespatternpropertyionInput,ionChange,ionComplete,ionBlur,ionFocusreset,setFocusDoes this introduce a breaking change?
Other information
Dev build:
8.5.7-dev.11747772857.11c9c939Previews
Documentation