Skip to content

Disable spellcheck for OTP input to prevent unwanted spelling error visuals#82

Open
kivvvvv wants to merge 2 commits into
guilhermerodz:masterfrom
kivvvvv:master
Open

Disable spellcheck for OTP input to prevent unwanted spelling error visuals#82
kivvvvv wants to merge 2 commits into
guilhermerodz:masterfrom
kivvvvv:master

Conversation

@kivvvvv

@kivvvvv kivvvvv commented Jan 21, 2025

Copy link
Copy Markdown

When the OTP is not clear immediately after fulfilling it and the OTP input allows characters, those characters are subject to be spellchecked by the browser. Hence when the input has any spelling errors, the browser display a visual suggesting that there are some spelling errors, in this case, it looks like a red dotted underline as seen below:
spellcheck=true

spellcheck.true.mp4

According to MDN spellcheck, this property controls the behavior.
I don't think the spellchecking behavior is necessary for OTP input. Also the position is off, which could be misleading. (I know that it is necessary to visually hide the real input behind the scene for styling purposes, hence the visual for spelling error is misplaced.) For those reasons, I think it should be turn off.

So, this is when there is no spellchecking on the input, spellCheck={false}.
spellcheck=false

spellcheck.false.mp4

@vercel

vercel Bot commented Jan 21, 2025

Copy link
Copy Markdown

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

Name Status Preview Comments Updated (UTC)
rodz-input-otp ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 19, 2025 0:10am

@kivvvvv kivvvvv mentioned this pull request May 14, 2025
@guilhermerodz

Copy link
Copy Markdown
Owner

I agree spellcheck is not necessary for input-otp's UX.

I'll make time to review this and we'll make further adjustments for the sake of DX, but the proposal is great!

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants