No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Issue! Focus changes in q-input after mask update

    Framework
    2
    9
    547
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • I
      Ivana last edited by

      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.
      1_problem.png
      problem 1.1.png
      And when I change numbers and with that when mask changes this is the problem.
      problem_2.png
      problem 2.1.png
      Is there a solution to this problem?

      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by

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

        Scott

        1 Reply Last reply Reply Quote 0
        • I
          Ivana last edited by

          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…
          1 Reply Last reply Reply Quote 0
          • s.molinari
            s.molinari last edited by

            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

            1 Reply Last reply Reply Quote 0
            • I
              Ivana last edited by

              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

              1 Reply Last reply Reply Quote 0
              • s.molinari
                s.molinari last edited by 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

                1 Reply Last reply Reply Quote 0
                • I
                  Ivana last edited by

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

                  1 Reply Last reply Reply Quote 0
                  • s.molinari
                    s.molinari last edited by

                    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

                    1 Reply Last reply Reply Quote 0
                    • I
                      Ivana last edited by

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

                      1 Reply Last reply Reply Quote 1
                      • First post
                        Last post