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/ |
| ios: 'input-otp.ios.scss', | ||
| md: 'input-otp.md.scss', | ||
| }, | ||
| scoped: true, |
There was a problem hiding this comment.
What is the reason for making this a scoped component vs a shadow one?
| const pastedText = event.clipboardData?.getData('text') || ''; | ||
| const validChars = pastedText | ||
| .split('') | ||
| .filter((char) => validKeys.test(char.toLowerCase())) |
There was a problem hiding this comment.
Why using toLowerCase here? It seems like validKeys considers lower and upper casing via /^[a-zA-Z0-9]$/i;, when using a custom pattern, this may be confusing, no?
| const { inputRefs, length, validKeys } = this; | ||
|
|
||
| event.preventDefault(); | ||
| const pastedText = event.clipboardData?.getData('text') || ''; |
There was a problem hiding this comment.
How about returning early here if nothing is in the clipboard?
| const pastedText = event.clipboardData?.getData('text') || ''; | |
| const pastedText = event.clipboardData?.getData('text'); | |
| if (typeof pastedText === 'undefined') { | |
| return | |
| } |
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 functionalityfill,shape,size,colorseparatorsproperty to show a separator between 1 or more input boxesdisabled,readonlyandinvalidstatespatternpropertyDoes this introduce a breaking change?
Other information
Previews