Skip to content

QInput cursor position issue #17639

Open
Open
@alexgreenpol

Description

@alexgreenpol

What happened?

The issue involves the QInput component with a card number mask, which formats input into 4 sections of 4 digits separated by spaces. Specifically, on certain iPhone devices (I checked on IPhone 11 pro max, IOS 17.6.1), when numbers are entered, then deleted up to the space, and characters are input again, the cursor position becomes misaligned.

What did you expect to happen?

There is an issue with the QInput component when using a mask that includes spaces, such as 0000 0000 0000 0000. A video demonstrating this behavior has been attached for further context.

IMG_6806.online-video-cutter.com.mp4

Reproduction URL

https://jsfiddle.net/arp4czv5/4/

How to reproduce?

  1. Five numbers are entered.
  2. One number is deleted, which also removes a space from the mask.
  3. Input is resumed, resulting in the cursor being incorrectly positioned.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Chrome, Safari, iOS

Quasar info output

No response

Relevant log output

No response

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions