[bug]: Input component can't handle type tel and pattern

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

69.23k stars 4.12k forks source link

[bug]: Input component can't handle type tel and pattern #3520

Open algorithm-developer opened 4 months ago

algorithm-developer commented 4 months ago

Describe the bug

Input component can't handle type tel and pattern. I can type letters on it even type is tel.

Phone number

Affected component/components

import { Input } from "@/app/components/shadcn/ui/input";

How to reproduce

Use input component on page like this template then write letter on it.

Phone number

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

OS Name Microsoft Windows 11 Pro
Version 10.0.22631 Build 22631

Before submitting

[X] I've made research efforts and searched the documentation
[X] I've searched for existing issues

AtharvaJoshi16 commented 4 months ago

@algorithm-developer Input type pattern is not supposed to block the user on entering invald pattern text. On submitting the value in a form, it will pop up validation error. Your issue for input type tel is valid, though!

AtharvaJoshi16 commented 4 months ago

@shadcn I can take this up.

AtharvaJoshi16 commented 4 months ago

Raised PR for the issue https://github.com/shadcn-ui/ui/pull/3560

algorithm-developer commented 4 months ago

@algorithm-developer Input type pattern is not supposed to block the user on entering invald pattern text. On submitting the value in a form, it will pop up validation error. Your issue for input type tel is valid, though!

@AtharvaJoshi16

Example: I want to take phone numbers from clients (users). I must put input type to "tel" because without that users can type letters on it. After set type and pattern its still taking letter inputs on it even type is set to "tel" and even pattern set.