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][2.6.1] v-otp-input : copy/paste does not update the linked model value correctly #14536

Closed
mathiasconradt opened this issue Dec 21, 2021 · 4 comments
Assignees
Labels
C: VOtpInput VOtpInput T: bug Functionality that does not work as intended/expected
Milestone

Comments

@mathiasconradt
Copy link

mathiasconradt commented Dec 21, 2021

Environment

Vuetify Version: 2.6.1
Vue Version: 2.6.11
Browsers: Chrome 96.0.4664.45
OS: Linux x86_64

Steps to reproduce

Go to the codepen and instead of typing values into the 6 OTP input fields, copy/paste(!) a 6-digit-long number into the OTP field (put the cursor into the first OTP digit field, then paste with ctrl+v).
The linked model (otpValue in the example) output below the v-otp-input is not updated. The model only updates if you enter a number value into the OTP fields one-by-one. Copy/paste does not work. Interestingly copy/paste also does not trigger the "changed" event, but it does trigger the "complete" event.

Expected Behavior

When copy/pasting values into the v-otp-input, the linked model (otpValue in the example) should be updated accordingly.

Actual Behavior

When copy/pasting values into the v-otp-input, the linked model (otpValue in the example) does not get updated.

Reproduction Link

https://codepen.io/the0pe/pen/vYJoYJb

Other comments

This bug might look related to #14437 but it's different and the other way around, also explicitly related to copy/pasting values into the v-otp-input.

@mathiasconradt
Copy link
Author

mathiasconradt commented Dec 22, 2021

I found that the value passed in the @finish method is correct, so this is what I now use as a workaround.

<v-otp-input
  @finish="onFinish"
  ...
/>

[...]

onFinish(otp) {
  // the otp value in here is correct even when copy/pasted
  this.otpValue = otp
}

@KaelWD KaelWD added C: VOtpInput VOtpInput T: bug Functionality that does not work as intended/expected and removed S: triage labels Dec 27, 2021
@KaelWD KaelWD added this to the v2.6.x milestone Dec 27, 2021
@KaelWD KaelWD self-assigned this Dec 27, 2021
@KaelWD KaelWD closed this as completed in bab2fa2 Dec 27, 2021
@enyoghasim
Copy link

Why is this closed?
The @finished is not working

@enyoghasim
Copy link

I found that the value passed in the @finish method is correct, so this is what I now use as a workaround.

<v-otp-input
  @finish="onFinish"
  ...
/>

[...]

onFinish(otp) {
  // the otp value in here is correct even when copy/pasted
  this.otpValue = otp
}

this is not working at the moment

@dhrumil-thakkar-pedalsup

Try using @on-complete, it worked for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VOtpInput VOtpInput T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

No branches or pull requests

4 participants