Keyboard pops up after selection is made on mobile devices

[j-w-miller]

Banging my head on this for a while, hoping somebody can point me in the right direction. On iOS the keyboard is displayed momentarily, however on android it persists when viewed with Firefox or Chrome and is not removed until it looses focus. Here's the code, not much to it:

<ui-select ng-model="$parent.source_type" theme="bootstrap" title="Choose source type" search-enabled="false">
  <ui-select-match  placeholder="Select a source type ...">{{$select.selected.name}}</ui-select-match>
  <ui-select-choices  repeat="type in source_types">{{type.name}}</ui-select-choices>
</ui-select>

The scenario is:

• Web page is displayed.
• User touches ui-select element and drop-down opens up.
• User selects (touches) desired element from drop-down, drop-down is closed displaying the user selected element.
• Keyboard is displayed <<< undesirable event

Am I missing something?
Any ideas on how I could prevent this from occurring?
Is this a bug or feature? <grin>

Thanks for looking,
John

[leoncc]

Had the same issue with the keyboard on Android with Chrome, popped up twice when the control got focus and after an item has been selected. Here is a quick and dirty fix for the two unwanted keyboard popups (in reverse order).

In select.js, the ctrl.close....., comment out:
//$scope.$broadcast('uis:close', skipFocusser);

The focusser seems to be a dummy element that receives focus and it looks like it causes the keyboard to pop up, when you select an item and the dropdown closes.

Where it does the #templateCache thing right at the end of select.js, last line (assuming you use selectize):

$templateCache.put("selectize/select.tpl.html","<div class="ui-select-container selectize-control single" ng-class="{'open': $select.open}"><div class="selectize-input" ng-class="{'focus': $select.open, 'disabled': $select.disabled, 'selectize-focus' : $select.focus}" ng-click="$select.activate()"><div class="ui-select-match"></div><input ng-readonly="!$select.searchEnabled" type="text" autocomplete="off" tabindex="-1" class="ui-select-search ui-select-toggle" ng-click="$select.toggle($event)" placeholder="{{$select.placeholder}}" ng-model="$select.search" ng-hide="($select.selected && !$select.open)" ng-disabled="$select.disabled" aria-label="{{ $select.baseTitle }}"></div><div class="ui-select-choices"></div></div>");}]);

So moving searchEnabled to ng-readonly (instead of ng-hide) lets you keep the placeholder text, does not cause the first keyboard popup and does not cause the height shrinkage, which I also experienced.

Then also where you use the control in your view in the markup: ...... search-enabled="false".

I did not test this thoroughly for side effects.

[NetanelBasal]

i have this problem too, you resolve this in elegant way?

[j-w-miller]

No, I reverted back to using html . I thought leoncc's proposal was interesting, but was too near release of our software to take the risk.

[NetanelBasal]

Ok thanks.

[greenwebdev]

+1 for this, would love a fix.

[danielolivaresd]

@leoncc that did the trick for me. Since i'm using Bootstrap I changed select.js to the following:

$templateCache.put("bootstrap/select.tpl.html","<div class=\"ui-select-container ui-select-bootstrap dropdown\" ng-class=\"{open: $select.open}\"><div class=\"ui-select-match\"></div><input ng-readonly=\"!$select.searchEnabled\" type=\"text\" autocomplete=\"off\" tabindex=\"-1\" aria-expanded=\"true\" aria-label=\"{{ $select.baseTitle }}\" aria-owns=\"ui-select-choices-{{ $select.generatedId }}\" aria-activedescendant=\"ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}\" class=\"form-control ui-select-search\" placeholder=\"{{$select.placeholder}}\" ng-model=\"$select.search\" ng-show=\"$select.searchEnabled && $select.open\"><div class=\"ui-select-choices\"></div></div>");

(the important part was adding

ng-readonly="!$select.searchEnabled"

[bereziuk]

+1

[zenato]

+1 i have this problem too. How to solve this problem?

[ebergama]

+1 here!

[sergei1152]

Tried using jquery blur events on the right elements after a selection with no luck. +1 for a fix.

[RuneKobberoe]

+1

[aliig]

+1

[cash1981]

+1

I came across this:
#201 (comment)
Is that another workaround?

I can verify that commenting the line
//$scope.$broadcast('uis:close', skipFocusser);
worked

[wesleycho]

This is also related to the broader discussion on event handlers with the library.

[karas111]

+1

[VictorAtPL]

+1

[rob-balfre]

Careful removing this line:
$scope.$broadcast('uis:close', skipFocusser);

Better off using the skip-focusser attribute.
See docs https://github.com/angular-ui/ui-select/wiki/ui-select

[francescjimenez]

+1

[vishnutk]

+1

[osamaurrehman]

I simply did by writing some css to prevent the keyboard to popup on mobile devices.
.ui-select-container .ui-select-search, .ui-select-container .ui-select-focusser {
visibility: hidden;
}

You can do this for mobiles specifically by detecting touch devices and adding a class to your body for mobile, like
.classForMobile .ui-select-container .ui-select-search, .classForMobile .ui-select-container .ui-select-focusser {
visibility: hidden;
}

[sushruth]

@osamaurrehman That saved my life today! thanks.

[ashwin713]

@leoncc Thanks a lot :)

[thienedits]

I was able to create a directive

(function () {
  'use strict';

  angular
    .module('app.directives', [])
    .directive('readOnly', readOnly);

  function readOnly() {
    return function (scope, element, attrs) {
      element.find("input").attr('readonly', 'readonly');
    };
  }

})();

then in the template add the read-only attribute

<ui-select multiple ng-model="group.selectedCategories" theme="bootstrap" ng-disabled="false" sortable="true" close-on-select="false" remove-selected="false" read-only>

[tarastmb]

part 1. for project requirements on "select.tpl.html" we already have:
ng-show="$select.searchEnabled && $select.open">
so the input hides when search-enabled is false

part 2. to solve the other keyboard placed on this focusser:
<input ng-disabled="$select.disabled" class="ui-select-focusser ui-select-offscreen ng-scope" type="text" id="focusser-0" aria-label="Select box focus" aria-haspopup="true" role="button" disabled=""></div>

I did a CSS fix for mobile resolutions and it works fine:

@media (max-width: @screen-xs-max) {
  .ui-select-offscreen {
    display: none;
  }
}

[MatejQ]

+2

[timkishkin]

I've found the following workaround useful: I added skip-focusser="isMobileDevice" attribute, where isMobileDevice is my bool scope variable set during mobile device detection. Thus nothing is changed on desktop.
Worth noting that hiding .ui-select-focusser element through CSS, as suggested above, leads to the dropdown being skipped when switching by 'tab' (although that's not very important if used only on mobile)