Navigation

    Quasar Framework

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

    [SOLVED] input focus on iOS

    Framework
    2
    5
    197
    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.
    • ssuess
      ssuess last edited by ssuess

      As mentioned elsewhere, I have a q-input search component that is triggering a q-menu to show while the user is typing their search (it triggers an api call to return search suggestions). In order not to lose focus on the input while the user is typing, I am also calling this method:

      searchFocus () { this.$refs.searchfield.focus() }
      

      This works on desktop and seems to also work on Android, but on iOS, focus is not returned to the input, or at least the keyboard is being hidden which amounts to the same thing: the user is constantly required to click in the input again to continue typing their search. Does anyone have any suggestions for a solution that will also work on iOS? Thanks!

      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by

        Use debounce so it will only call the api when user stops typing.

        1 Reply Last reply Reply Quote 0
        • ssuess
          ssuess last edited by ssuess

          I am, but that does not solve the problem of wanting to type more characters after. It only introduces a delay in the time before the menu shows, it does not leave input control where it should be (in the search input box). On desktop, programatically returning focus to the input works fine.

          1 Reply Last reply Reply Quote 0
          • metalsadman
            metalsadman last edited by metalsadman

            @ssuess Time to show some codes 😉. Nvm, try to use no-focus prop in your q-menu. try this in your ios device https://codepen.io/metalsadman/pen/NZdrZE?editors=1010, tried it in android.

            1 Reply Last reply Reply Quote 2
            • ssuess
              ssuess last edited by

              omg, that fixes it!! Just adding no-focus to the menu! You are the best, thanks!!

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