search

shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
62.96k stars 3.54k forks source link

[Bug]: input-otp trigger only number keypad with chars pattern included #3067

Open Chay009 opened 3 months ago

Chay009 commented 3 months ago

Describe the bug

though patterns included with chars as prop for the input otp component,in mobile devices only number keypad is triggered not the char key board

Affected component/components

input-otp

How to reproduce

  1. Include input-otp component
  2. run the code using simulators for mobile devices
  3. we observe that num keypad is triggered

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

It will be a issues in all browsers

Before submitting

guilhermerodz commented 3 months ago

hi @Chay009 this is not a bug and has nothing to do with pattern.

it's HTML. Please apply the prop <input inputmode="text">, which is the default value according to mdn.

guilhermerodz commented 3 months ago

hi @Chay009 is it solved by now?

Chay009 commented 3 months ago

The input of the otp has to be changed by modifying the ui input otp file I didn't find any prop to toggle

On Mon, 25 Mar 2024, 8:09 am Guilherme Rodz, @.***> wrote:

hi @Chay009 https://github.com/Chay009 is it solved by now?

— Reply to this email directly, view it on GitHub https://github.com/shadcn-ui/ui/issues/3067#issuecomment-2017108950, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZT2RPX3XA775SOPCEZ3RODYZ6E5VAVCNFSM6AAAAABE6JQ7MKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMJXGEYDQOJVGA . You are receiving this because you were mentioned.Message ID: @.***>

guilhermerodz commented 3 months ago

@Chay009 as I mentioned before, have you tried using the inputMode="text" prop from native html inputs (MDN ref)?

I strongly believe that solves it.