guilhermerodz/input-otp

One time passcode Input. Accessible & unstyled.

input-otp's Issues

Duplicate files

I found files with duplicate logic to utility to merge class names in:

input-otp/apps/website/src/lib/utils.ts

Line 4 in de9d59e

export function cn(...inputs: ClassValue[]) {

input-otp/apps/website/src/lib/utils/cn.tsx

Line 6 in de9d59e

export function cn(...inputs: ClassValue[]) {

This is intentional?

erasing character moves the other values to the left

idk if intended behavior tho

Screen.Recording.2024-02-15.at.23.22.23.mp4

Component Does Not Support Pasting Codes on Mobile

Description

The OTP (One-Time Password) input component currently does not allow users to paste codes into the input fields. This limitation can affect the user experience, especially for those who rely on password managers or receive their OTP codes through messaging apps, requiring them to manually type the code each time.

Reprodution

1. Copy an OTP code from your password manager or messaging app.
2. Try pasting the OTP code into the OTP input field.
3. Code does not get pasted as expected.

Expected behavior

Users should be able to paste the OTP code into the input field.

OS

OS: iOS 17.1
Browser: Safari

[BUG] : Failed to execute 'insertRule' on 'CSSStyleSheet' (Rare, some mobile devices)

On some rare cases this error shows on some devices. This was sent to me by my client, She tried it on her husbands phone and the otp works, just on some devices it shows this error. I tried on other mobile devices I have here and couldn't recreate the error.

Uppon checking the source code is text : transparent instead of color : transparent. But I am not sure if this really the cause of the error.

Is there a possible fix/workaround for this?

Thanks for response 😄

Strange ring around the input on focus

On focus, I get a ring around my entire OTP component.

I use shadcn. This isn't unique to the new shadcn version of the component. Just the Tailwind might be the problem. Adding className="focus-visible:ring-0" fixes it. Could this become a default class?

There's a problem with the implementation of shadcn that I mentioned here: shadcn-ui/ui#2953. I had to manually fix shadcn's code for this to work.

Feature reaquest: autofFocus to focus on 1st slot after component mounts

I think there should be a prop that makes focus on 1st slot by default like autoFocus in input element.

Encountered an error while testing with vitest:

Error: TypeError: at.supports is not a function

I encountered the following error while testing with vitest:

../../node_modules/input-otp/src/input.tsx:69:22

Issue Description:

I'm currently encountering a TypeError: at.supports is not a function when testing with vitest. Here's my vitest configuration:

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vitest/config';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
    plugins: [react(), tsconfigPaths()],
    test: {
        globals: true,
        environment: 'jsdom',
        setupFiles: './test-setup.ts',
        css: true,
        server: {
            deps: {
                inline: ['next-auth'],
            },
        },
    },
});

Any Idea Why?

Could someone provide insight into why this error is occurring?

[BUG] global ::selection breaks transparent color

having selection selector in the global.css changes the input color

::selection {
   @apply bg-highlight text-foreground;
 }

Expected Behavior

Color is transparent

Current Behavior

Input text color takes the value defined in selection

Possible Solution

Make color transparent for a selection selector
Not sure if this should be done at the library level or in shadcn-ui?

.selection\:text-transparent *::selection {
  color: transparent;
}

shadcn-ui/ui#3085

Limitations/issues caused by core implementation

How the library works (fundamentals)

input-otp is an accessible input that renders:

• a 100% unstyled UI layer (custom to your design system) with pointer-events:none
• an overlay layer (native <input />) with pointer-events:all and position:absolute inset:0.

In short: it's 1 underlying native input as an overlay on top of N layers of render.

---

However, the core implementation has some limitations. The known limits are:

Visual (UI) limitations

iOS selections are always visible.

PS: iOS copy-paste touch callout menus can't be triggered if the selection is <1px in width.

iOS don't provide a way to style input::selection in CSS, we end up with a non-transparent selection when at least 1 char of the input is selected within the underlying input. I'm applying super negative letter-spacing to ensure the visible selection becomes as thin as possible (=1px) but can't render smaller than 1px otherwise iOS touch callout doesn't pop up.

CleanShot.2024-03-11.at.12.59.21.mp4

This would barely go noticed in a normal OTP flow where the user types in an OTP code or autofills it from his password manager. The user wouldn't even notice the selection as developers usually choose to automatically submit the form using <input onComplete prop so there's no time to look at 1px selections.

[Mobile] Firefox shows quote markers in left+right corners of the selection.

TODO: add image

Behavior (UX) limitations

Click/touch/touchmove-to-select slots

The user cannot click/touch/hold-move and select a slot since the native input's letters are shrinked into a ~1px thin width due to added CSS letter-spacing:-.5em, resulting in all characters being a ultra thin condensed area. Unfortunately, the user cannot manually choose his selection by mouse/touch, only by keyboard.

The expected behavior would be:

CleanShot.2024-03-11.at.13.17.19.mp4

The video above has been a feature request.

---

Related issues by the community are #31

Support alphanumeric

Is your feature request related to a problem? Please describe.
I want both letters & numbers. Its pretty common in various services that I use for OTP.

Heck, most authenticator apps like Twitter use alphanumeric. Ik this bcz its logging me out for the last 30 days everyday so I have to type it out lol.

Describe the solution you'd like

inputMode="alphanumeric"

Implementation: https://github.com/pilcrowOnPaper/oslo/blob/c1f60eca2137cda93bb7aefed35781d85d12c7b6/src/crypto/random.ts#L52-L67

Stops working when onChange handler is added.

As soon as I add an onChange handler, the OTP input stops working (i.e. no digits appear when i type).

This is my code:

"use client"

import React from 'react';
import { OTPInput } from 'input-otp';
import { Slot, FakeDash } from '@/components/ui/otp';
import SectionContainer from '@/components/layout/SectionContainer';


const Test = () => {
    return (
        <SectionContainer>
            <OTPInput
                onChange={(code) => { console.log(code) }}
                maxLength={6}
                containerClassName="group flex items-center has-[:disabled]:opacity-30"
                render={({ slots }) => (
                    <>
                        <div className="flex">
                            {slots.slice(0, 3).map((slot, idx) => (
                                <Slot key={idx} {...slot} />
                            ))}
                        </div>

                        <FakeDash />

                        <div className="flex">
                            {slots.slice(3).map((slot, idx) => (
                                <Slot key={idx} {...slot} />
                            ))}
                        </div>
                    </>
                )}
            />
        </SectionContainer>
    )

};

export default Test;

The OTP input works without onChange={(code) => { console.log(code) }}, but when I add it, all the input boxes remain empty as I type.

tools

https://fffuel.co/svg-spinner/
https://input-otp.rodz.dev/
https://github.com/guilhermerodz/input-otp

[BUG] - Clicking on single slot moves cursor to relative position in the whole input

Expected Behavior

I would expected the cursor position / selected cell to be the slot that is clicked

Current Behavior

The cursor position seems to be picked as a relative position of the entire input based on where in the x direction the slot is clicked

Possible Solution

Select the slot that is clicked always

Steps to Reproduce

Screen.Recording.2024-03-11.at.10.32.45.mov

1. Fill out the input
2. click on one of the earlier slots, e.g. the first
3. watch the cursor move

Context (Environment)

Entering an OTP and thinking one can go back and edit or select a char (even if they won't be able to)

Detailed Description

not yet looked but will do

Possible Implementation

not yet looked but will do

great component btw!

How to change focus to the submit button after input is finished

When you've finished typing/pasting the code, you would want to change the focus to the submit button. Right now it stays on the last slot and typing will keep rewriting it. How can we achieve this?

Thanks for the great library by the way :)

[BUG]: Form elements do not have associated labels - Accessibility issue on documentation

Version of the library: 1.x

Current Behavior

Possible Solution

I'm working on it, I will probably create a PR request for it.

Steps to Reproduce

1. Open the dev console (chrome or any browser).
2. Do the lighthouse analysis

[BUG] Backspace doesn't work for the first field after starting to delete in the middle

Expected Behavior

Input can be cleared completely

Current Behavior

Input keeps the last character filled, navigating to the next item and back fixes this behavior

Steps to Reproduce

Screen.Recording.2024-03-31.at.16.19.57.mov

I'm using backspace on the video to delete the characters

Context (Environment)

Just noticed that this happens on the landing page

Missing a prop to pass a "name" to the underlying input.

When using within an HTML <form> I need an id and name attribute for the underlying input.

Right now, I'm having to wrap the component and use an effect to accomplish this:

const {name, id} = props
const inputRef = useRef<HTMLInputElement>(null)

useEffect(() => {
  const el = inputRef.current
  if (!el) return
  if (id) el.id = id
  if (name) el.name = name
}, [])

return (
  <OTPInput
    ref={inputRef}
    // ...

It'll be nice to have id and name props that can be directly passed to OTPInput.

I want to go to the particular box edit!

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[BUG] Save in 1Password Button Overlaps Input

Expected Behavior

Either the 1Password button save button is disabled or the CSS is adjusted to ensure it does not overlap the actual input's text

Current Behavior

The Save in 1Password Button overlaps the final digit in the OTP input obscuring the entered digit either partially or entirely.

Possible Solution

You can read a bit more about handling or disabling the 1Password integration in 1Password's docs

Steps to Reproduce

1. Install 1Password Extension in your favourite browser of choice
2. Visit a page where the OTPInput is being used (e.g. https://ui.shadcn.com/docs/components/input-otp or https://input-otp.rodz.dev/)
3. Focus the input
4. Ta-da! You now see the Save in 1Password Button overlapping the input 🎉

Context (Environment)

• Using Chrome 122 on macOS Sonoma 14.4
• Also tested on Safari 17.4 and Firefox 123
• Would likely also affect other password managers like LastPass and Dashlane though I've not tested this

Detailed Description

n/a

Possible Implementation

n/a