Issue! Focus changes in q-input after mask update

Ivana

Hi, I’m trying to change the mask after the value update in q-input. But every time the mask is updated, focus in q-input changes position in one space/position backward.
This is before mask changes.

problem 1.1.png
And when I change numbers and with that when mask changes this is the problem.

problem 2.1.png
Is there a solution to this problem?

s.molinari

Can you create a codepen demonstrating the issue please? It will be easier for us to help if we see a working example.

Scott

Ivana

https://codepen.io/Ivanaaa/pen/WNNjmoO
Steps to reproduce:

Clear the current input content
Trigger the watcher to change the mask with writing 34… or 37…

s.molinari

Ok. I understand now. Thank you.

I don’t believe the mask function is going to work dynamically while input is being made. The mask has to be set before input starts.

And, most CC forms I’ve come across also always show a picklist for the customer to select the type of credit card she wants to use. I’d suggest going that route.

https://codepen.io/smolinari/pen/XWWRLWq

Scott

Ivana

Thank you for your replay. However, the application requires dynamically change on the mask while the input is being made, without the need for a user to choose the type of the credit card.
Ivana

s.molinari

If you absolutely must have that kind of dynamic masking, you can either use your own built up logic or use an external library like this one.

https://github.com/AfikDeri/v-credit-card

Scott

Ivana

Thank you. I will try to implement something from that.
Ivana

s.molinari

Hi Ivana,

There was another sort of similar issue reported. I’m not sure it will help your dynamic mask issue, but it might.

https://github.com/quasarframework/quasar/issues/5420#event-2756954530

Scott

Ivana

Thank you. The new update on quasar v1.3.0. helped me. It works perfectly.
Ivana