Framework7: autocomplete onopen focus on input

[seme1]

This is a (multiple allowed):

• [x] bug
• [ ] enhancement
• [ ] feature-discussion (RFC)

• Framework7 Version: 1.53.
• Platform and Target: IOS and Android

I'm attempting to focus on the search input field in the standalone autocomplete component so that the user can start typing right away as soon as autocomplete page opens without having to tap on the search input field.

To implement the above, I attempted to use the following when the autocomplete is defined.

onOpen: function (autocomplete, value) {
$(autocomplete.page).find("input[type=search]").focus();
}

The above code works. However, it seems that the input is focused before the page animation is complete. This results in having a half empty page with black background when standalone finishes the opening animation.

Possible solutions to the above are:

• Have a custom callback function "afterOpened" which is called after the page finishes the animation. I would then place the above code inside 'afterOpened' instead of 'onOpen'.
• have an option to open standalone autocomplete without animation (not the best, but should work)

[ZanderBrown]

JSFiddle demonstrating the bug
JSFiddle demonstrating workaround

An 'autofocus' parameter on autocomplete is definitely something worth considering.

In the meantime i can offer a workaround:

  onOpen(autocomplete) {
    setTimeout(function() {
      $$(autocomplete.page).find("input[type=search]").focus();
    }, 60);
  }

The timeout should allow the animation to complete before input focus

[seme1]

Thanks. However, is the animation time always fixed among all devices on IOS and Android ??
(60ms as in the timeout function you provided )

[ZanderBrown]

60ms should be a reasonable time for all platforms but feel free to increase it.

[seme1]

It works for Android, but not for IOS. The problem is with the keyboard not opening. I remember I had a similar problem in the past. The only solution I could find was by disabling the animation for popups using CSS. This allowed me to focus on search input field in the opened page/popup which opens without any animation.

Again, it would be nice if F7 has native support for autofocus which works on both IOS and Android AND triggers the keyboard to open on both platforms.

[ZanderBrown]

@seme1, I have opened a PR for this. Just waiting for the ok from @nolimits4web to merge.

[seme1]

That's great. Thanks. Do the modifications you made apply to both 'page' and 'popup' ? Are the pageAfterAnimation exposed for the user now ?

[seme1]

@ZanderBrown @nolimits4web
Also, can we have an option for opening standalone autocomplete in popup/page without animation ??

[seme1]

@ZanderBrown
I just tested your solution and on Ios, the search input is focused correctly. However, the keyboard does NOT show up. This has something to do with manual input focus on IOS. The only way this would work is by disabling animation. Do you have an idea how this can be achieved ?