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.


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


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:

1. Clear the current input content
2. 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