weird behavior in iOS Safari

[jesuslpm]

Hello,

ui-select works great on desktop, but in iOS Safare I have experienced weird behavior. When you clik on the control some ramdom item is selected, the keyboard is not shown. If then you select one item tapping on it, the keyboard is suddenly shown and the wrong item is selected. If instead of tapping on an item, you tap on the control again, the keyboard is shown, and all works as expected.

[jesuslpm]

You can see this behavior on the demo page, testing it with iPad mini iOs version 8.1.2

http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview

[aziule]

Same issue here on iPad mini 2 & iPhone 4/4S

[siva-I]

Is there a fix for this issue yet? i am also facing this issue.

[sinxwal]

+1

[MalikAbed]

+1

[dallasclark]

+1

[tallsam]

can confirm this too

[aziule]

Have somebody found how to fix it? Any forked project / quickfix?

[trouseredApe]

+1

[driver-by]

The reason of the bug is that iOS safari doesn't allow to set focus from functions which wasn't the result of user's interaction. Specifically the first function in call stack must be some sort of reaction on 'click', 'touchend',.. events. Some details here.
Quick fix is to remove timeout in this code:
Replace

$timeout(function() {
  ctrl.search = initSearchValue || ctrl.search;
  ctrl.searchInput[0].focus();
});

with

  ctrl.search = initSearchValue || ctrl.search;
  ctrl.searchInput[0].focus();

Timeout starts new function call stack, so iOs Safari doesn't allow that .focus().
But, important! This code won't work, if your input is hidden with display: none (or some of it ancestors). You can't set focus to the hidden element.
That's why this timeout is here - it waits when angular shows the dropdown.
I use select2 theme, so I updated my styles with:

.select2-display-none {
  overflow: hidden;
  height: 0;
  opacity: 0;
}

Also I recommend to disable focusser activation on select close, to prevent iOS keyboard jumping. Here is the code of close function. My code is:

ctrl.close = function() {
    if (!ctrl.open) return;
    if (ctrl.ngModel && ctrl.ngModel.$setTouched) ctrl.ngModel.$setTouched();
    _resetSearchInput();
    ctrl.open = false;

    $scope.$broadcast('uis:close', true);

  };

Conclusion
I don't know how to fix that properly in ui-select, but one of the approaches is to replace the timeout in first piece of code and show dropdowns not by angular class, but with immediate style update before focus (remove 'display: none').
About jumping keyboard on close... I don't know why skipFocusser is in the close function, so cannot suggest how to prevent skpFocusser === false for iOS here.

[hjmodha]

+1

[ahuang321]

+1

[madmed88]

+1

[amrsh]

+1

[adolfov]

+1

[AlemaoEc]

+1