[SOLVED] input focus on iOS

  • 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!

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

  • 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.

  • @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.

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

Log in to reply