No autofocus on autocomplete input (double tap is required)

[xloading]

Hi Guy!

My issue is actually similar to #214

I'm using ion-autocomplete for a while in my side-menu app and previously it was initiated by the button placed in main content of the view. It worked nicely even though the autofocus on input after opening the modal was not my final intention but it was not critical.

But lately we decided to move this initiating button from view content to header bar.
And here came the surprise: for some reason the input not only stopped being autofocused but also started requiring TWO taps before being focused :(

I know that it is highly desirable to illustrate with demo but I faced strange issue with .controller('ionAutocomplete') not being initiated in plnkr before fetchSearchQuery call: https://embed.plnkr.co/jaddK7gSJYLMwKuUwXyz/

Therefore I have made two screencasts illustrating the problem:
with button in side menu content view (no issue, immediate autofocus) - https://www.youtube.com/watch?v=jbekzaPhvDg
with button in header bar (two taps are needed) - https://www.youtube.com/watch?v=zxrUWjREwVY

Please let me know if I can help with anything more or if the plnkr can be fixed somehow to illustrate the issue.

Thanks in advance!

[guylabs]

Hi @xloading

thanks for your nice explanation and the videos to show the issue. Could you maybe debug your app and add a break point to line https://github.com/guylabs/ion-autocomplete/blob/master/src/ion-autocomplete.js#L320 and tell me if this break point is hit and if there are input fields defined?

Maybe you can use the Codepen example here: https://github.com/guylabs/ion-autocomplete#guidelines-to-report-an-issue to maybe reproduce the issue as there everything is already setup.

I would also try it to use the default template and then your custom one maybe there are some differences too.

Hope that helps and I am sorry that I do not have too much time for that currently.

Thanks and regards,

Guy

[xloading]

Hi Guy!

Thanks a lot for your advising, this issue was somewhat tricky for me to debug but I finally found the root cause.
Note that in both cases I use externally managed input:

<input
ion-autocomplete
type="hidden"
readonly="readonly"
ng-model="searchQuery"
class="ion-autocomplete"
autocomplete="off"
max-selected-items="1"
items-method="searchCallback(query, isInitializing)"
item-view-value-key="name"
items-clicked-method="itemClicked(callback)"
manage-externally="true"
template-url="templates/searchTemplate.html"
placeholder="Search for anything..."
/>
<button class="button button-icon icon ion-search" ng-click="clickSearch()"></button>

The difference between those 2 scenarios was that part of document with map (where original button was placed) contained data-tap-disabled="true" attribute, while the one in header didn't.

Eventually this resulted in the following: when Ionic's tap is not disabled the click stack entered tapClick() Ionic function which contains the following code.

As you can see in the comments if the triggering element is NOT input (and in my case it's a button) than tapHandleFocus() blurs the focus and that's exactly why two taps were required (as I understand, first - to activate modal and second - to focus on input).

Therefore I've temporary resolved this by wrapping my header button into div with data-tap-disabled="true", but still I would like to ask you one question.

Is it possible somehow with ion-Autocomplete to achieve behavior in the middle of two above scenarios, i.e. I want the modal to be opened without focusing on input (so that keyboard doesn't hide half of elements found by default) but if needed focus can be placed on input with single tap?

Thanks a lot in advance!

[guylabs]

Hi @xloading

sorry for the delay but I could not get to you earlier. Thanks a lot for this detailed explanation of the root cause!

I think the only way of achieving this would be to add a new property to the configuration which then executes this part here https://github.com/guylabs/ion-autocomplete/blob/master/src/ion-autocomplete.js#L319 or not. And for focusing on the input with an ontap this should then focus automatically.

Do you think that would be a solution?

Thanks and regards,

Guy

[xloading]

Hi @guylabs

Yes, it looks as as quite reasonable solution.
Thanks a lot for the feedback and looking forward to see this functionality implemented!

Regards,
Georgy