[typeahead] dropdown doesn't hide on blur (ios only)

[thomasgerard]

Hi,
when using the typeahead component in a form with multiple fields, the dropdown doesn't hide when the field looses focus.
This only occurs on ios (safari and uiwebview).

Steps to reproduce:

• Browse to http://angular-ui.github.io/bootstrap/#/typeahead with iOS safari on any device.
• Start typing 'te' with the virtual keyboard, the dropdown appears
• Either use the ">" next field button or "ok" button of the keyboard, the field loses focus and the dropdown is still displayed
• You can do the same with the next field, to finally have the three typeahead fields dropdown open
• You can also see the bug when tapping on another field, but this randomly leaves the dropdown open or closes all dropdowns.

Expected behavior:
The dropdown should be hidden as soon as the field looses focus, even if no dropdown value has been selected (to allow custom values).

[wesleycho]

Do you know what event gets fired when either of those buttons are entered on the iOS keyboard?

[wesleycho]

I did a little investigation using a monkeypatch of UI Bootstrap with this Plunker, and it looks like Safari is not firing any event when one presses tab, shift + tab, >, or <, the latter two being on the iOS keyboard.

I am not sure what we can do here, since it looks like an iOS Safari bug.

We can however catch the enter keypress, since event.which is 13, the standard enter button.

Edit: On further investigation, it looks like we can listen for the blur event.

Edit 2: It looks like enter is behaving as it should on the iOS keyboard.

[thomasgerard]

Wesley,
Thanks a lot for looking at that issue. I tested your plunkr on iOS (iPhone 5), the blur event is triggered, but setting 'hasFocus' to false doesn't fix the problem for "<", ">" and "OK" keyboard buttons. There's also a regression : if you try to edit a field you already filled, the cursor is stuck at the beginning and you can't write or delete.

I forked your plunkr and tried a little fix.
Just changed the 'blur' handler to

element.bind('blur', function (evt) {
    resetMatches();
    scope.$digest();
});

Tested again on iOS, works great for me.

[wesleycho]

hasFocus is pre-existing code, and is involved with other logic.

I took a look at your suggestion with a re-addition of your variable, and it breaks expected behavior of selecting the highlighted item on the iOS Simulator in Safari for the iPhone 6.

[thomasgerard]

Hi,
I could investigate further on the issue I have, after updating to 0.13.4.
I actually noted that I hadn't put typeahead-editable="true" and typeahead-focus-first="false", that solved part of my problem (being able to type free values).
Now with 0.13.4, I still have the issue that the blur event doens't hide the dropdown when I don't select an item in the list.

For example, if I type "Martin" and my list contains "Martino" and "Martina", using "<", ">" or "OK" on iOS leaves the dropdown visible.

Here is how I solved it:

element.bind('blur', function() {
    if (isSelectOnBlur && scope.matches.length && scope.activeIdx !== -1 && !selected) {
        selected = true;
        scope.$apply(function() {
            scope.select(scope.activeIdx);
        });
    }
    if (!isSelectOnBlur && isEditable && scope.matches.length && scope.activeIdx == -1 && !selected) {
        resetMatches();
        scope.$digest();
    }
    hasFocus = false;
    selected = false;
});

The purpose is to reset the dropdown content if editable and nothing's selected.
The fix is going to test phase on our side.

[wesleycho]

Linking for reference here for investigation on another Mac since Apple seems to have no regard for iOS Simulator on the Macbook Air.

[wesleycho]

Can you post a reproduction via Plunker - not seeing this at all.

[wesleycho]

Closing due to lack of being able to reproduce this - feel free to file a new issue if this is still a problem.

[bd60]

I believe this issue should not closed (or something has been changed to break the fix since it was fixed). The typeahead dropdown stays open on iOS on a blur event triggered by using the "<", ">" or "Done" buttons on the keyboard. You can see this behavior on the typeahead example on the angular-ui site.

fairly hacky work around that gets the job done and doesn't appear to disrupt anything else is to add the following to the bottom of the blur event binding:

$timeout(function() { resetMatches(); });

[carolineBda]

Hello,
It still doesn't work for me. I've reproduce the problem here:
https://jsfiddle.net/carolineBda/rc88cb48/2/

When typeahead is opened on a iPhone (safari) you can click any where on the page it doesn't closed.

Steps to reproduce the issue:
Open the jsfiddle on an iPhone 6 in Safari
type anything in the field
click elsewhere: the dropdown stay opened

Version of Angular, UIBS, and Bootstrap

Angular: 1.6.1

UIBS: 2.5.0

I've noticed that it is working on the demo website (dropdown close when clicking elsewhere on an iPhone):
https://angular-ui.github.io/bootstrap/#!#typeahead

Would you know why it is not behaving the same on the jsfiddle ?