Open
Description
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?
- Five numbers are entered.
- One number is deleted, which also removes a space from the mask.
- 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