Skip to content

fix(VOtpInput): handle deletion via onBeforeinput for mobile compatibility#22657

Merged
J-Sek merged 4 commits intovuetifyjs:masterfrom
Yanis-Riani:fix/22628-votp-input-mobile-backspace
Mar 4, 2026
Merged

fix(VOtpInput): handle deletion via onBeforeinput for mobile compatibility#22657
J-Sek merged 4 commits intovuetifyjs:masterfrom
Yanis-Riani:fix/22628-votp-input-mobile-backspace

Conversation

@Yanis-Riani
Copy link
Copy Markdown
Contributor

Description

fixes #22628

Move deletion handling from onKeydown to onBeforeinput allowing compatibility with some mobile keyboards (SwiftKey, GBoard, ...), since onKeydown no longer handles deletion every alternative delete input such as deleteSoftLineBackward had to be handled but act like a single Backward / Forward delete

As mentioned in the issue a minor backspace behavior has been made allowing user to erase last full field value without a backward move:

On desktop it also feels weird - automatically moves backward when I actually want to replace character on the 4th field, unless I use Delete (instead of Backspace)

Markup:

<template>
  <v-app>
    <v-container>
      <v-otp-input v-model="msg" />
    </v-container>
  </v-app>
</template>

<script setup>
import { ref } from "vue";

const msg = ref("1234");
</script>

@Yanis-Riani Yanis-Riani changed the title Fix/22628 votp input mobile backspace fix(VOtpInput): handle delation via Feb 26, 2026
@Yanis-Riani Yanis-Riani changed the title fix(VOtpInput): handle delation via fix(VOtpInput): handle deletion via onBeforeinput for mobile compatibility Feb 26, 2026
@J-Sek
Copy link
Copy Markdown
Contributor

J-Sek commented Mar 2, 2026

Verified on GBoard. With Heliboard it works partially. For some reason for default type="number" backspace key on empty field does not emit beforeinput and only keydown with keyCode 229. I am switching to FUTO Keyboard, so it does not matter.

@J-Sek J-Sek requested a review from a team March 2, 2026 18:18
@J-Sek J-Sek added T: bug Functionality that does not work as intended/expected C: VOtpInput labels Mar 2, 2026
@J-Sek J-Sek added this to the v3.12.x milestone Mar 3, 2026
@J-Sek J-Sek merged commit 2f8a4f9 into vuetifyjs:master Mar 4, 2026
9 checks passed
@Yanis-Riani Yanis-Riani deleted the fix/22628-votp-input-mobile-backspace branch March 4, 2026 09:50
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 this pull request may close these issues.

[Bug Report][3.11.8] VOtpInput - hard to clear values using mobile backspace

2 participants