Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report][3.4.8] VOtpInput #18931

Closed
mdotme opened this issue Dec 26, 2023 · 1 comment · Fixed by #19345
Closed

[Bug Report][3.4.8] VOtpInput #18931

mdotme opened this issue Dec 26, 2023 · 1 comment · Fixed by #19345
Assignees
Labels
C: VOtpInput T: bug Functionality that does not work as intended/expected
Milestone

Comments

@mdotme
Copy link

mdotme commented Dec 26, 2023

Environment

Vuetify Version: 3.4.8
Vue Version: 3.3.13
Browsers: Chrome 120.0.0.0, Google Chrome, Mozilla Firefox, Safari, Microsoft Edge, Internet Explorer
OS: Windows 10, Windows, Android, iOS, Mac OSX, Linux

Steps to reproduce

I can input only numbers, this is good. But when I copy an essay and paste it to vuetifty otp input it still works & also updates the model value:
image

Expected Behavior

It should validate pasted data, if it's invalid it shouldn't get that:

  1. The length
  2. Numbers only

Actual Behavior

I can paste the essay without a problem.

Reproduction Link

https://play.vuetifyjs.com/#...

@mdotme
Copy link
Author

mdotme commented Dec 26, 2023

This issue can be temporarily fixed in this way:

const otp = ref("");
watch(
  () => otp.value,
  () => {
    const numbersArray = otp.value.match(/\d+/g);
    otp.value = numbersArray ? numbersArray.slice(0, 6).join("") : "";
  },
);

@johnleider johnleider added T: bug Functionality that does not work as intended/expected C: VOtpInput and removed S: triage labels Mar 15, 2024
@johnleider johnleider added this to the v3.5.x milestone Mar 15, 2024
johnleider added a commit that referenced this issue Mar 15, 2024
fixes #18931

Co-authored-by: Son Tran <stt@cct-technology.com>
Co-authored-by: John Leider <john@vuetifyjs.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VOtpInput T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants