Skip to content

fix(VMaskInput): fix caret position while editing#21925

Merged
ikushum merged 10 commits intodevfrom
fix/caret-position
Aug 24, 2025
Merged

fix(VMaskInput): fix caret position while editing#21925
ikushum merged 10 commits intodevfrom
fix/caret-position

Conversation

@ikushum
Copy link
Copy Markdown
Member

@ikushum ikushum commented Aug 17, 2025

fixes #21776

Description

Fix caret position while editing mask value from middle

Markup:

<template>
  <v-app>
    <v-container>
      <v-row>
        <v-mask-input
          v-model="msg"
          :mask="mask"
          :placeholder="mask"
        />
      </v-row>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref, computed } from 'vue';
  const mask = ref('(AA)-###-NNN-##-##')
  const msg = ref('AS123XYZ4567');
</script>

@ikushum ikushum requested a review from a team August 17, 2025 07:53
@ikushum ikushum self-assigned this Aug 17, 2025
@ikushum ikushum added T: bug Functionality that does not work as intended/expected C: VMaskInput labels Aug 17, 2025
@ikushum ikushum force-pushed the fix/caret-position branch from 46f49e7 to fd3276f Compare August 17, 2025 07:54
@ikushum ikushum requested a review from J-Sek August 17, 2025 17:20
@ikushum ikushum force-pushed the fix/caret-position branch 2 times, most recently from d64338d to 89b3b6c Compare August 18, 2025 05:16
@J-Sek
Copy link
Copy Markdown
Contributor

J-Sek commented Aug 18, 2025

When cutting off (and pasting) fragments containing separator(s) there is a minor miss in cursor position (by 1).

Recording
Screencast.from.2025-08-18.22-06-39.webm

BTW. vue-mask-input (judging by a brief manual test) seems to be particuarly resilient to this kind of interaction and does not lose typed values when the potential result does not match the mask - as it does not shift them left. I am interested in your opinion about their implementation and the potential of VMaskInput to adopt this behavior (in the future).

@ikushum ikushum force-pushed the fix/caret-position branch from 89b3b6c to f991b3c Compare August 19, 2025 09:22
@ikushum
Copy link
Copy Markdown
Member Author

ikushum commented Aug 19, 2025

BTW. vue-mask-input (judging by a brief manual test) seems to be particuarly resilient to this kind of interaction and does not lose typed values when the potential result does not match the mask - as it does not shift them left. I am interested in your opinion about their implementation and the potential of VMaskInput to adopt this behavior (in the future).

I 100% agree, it's worth the improvement. Will plan to adopt this soon.

@ikushum
Copy link
Copy Markdown
Member Author

ikushum commented Aug 19, 2025

When cutting off (and pasting) fragments containing separator(s) there is a minor miss in cursor position (by 1).

Made some improvements to the logic, please have a look. Thanks

@ikushum ikushum force-pushed the fix/caret-position branch from f991b3c to bcc4566 Compare August 19, 2025 09:26
@J-Sek
Copy link
Copy Markdown
Contributor

J-Sek commented Aug 19, 2025

There is a minor regression:

  • with the example (AS)-123-XYZ-45-67
    • previously I was able to paste "h" in place of either "A" or "S" or 2 characters to replace both
    • now the paste action is removing everything after )- and does not apply the text from clipboard (or does it incorrectly)

@ikushum ikushum force-pushed the fix/caret-position branch from 1d374ba to 2b9e26e Compare August 19, 2025 15:14
@ikushum ikushum requested a review from J-Sek August 23, 2025 16:09
@ikushum ikushum merged commit 27dc68c into dev Aug 24, 2025
18 checks passed
@ikushum ikushum deleted the fix/caret-position branch August 24, 2025 01:30
@KaelWD KaelWD added this to the v3.10.0 milestone Sep 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

C: VMaskInput T: bug Functionality that does not work as intended/expected

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants