UI select angular with disabled search pops out keyboard on mobile devices

Question

I am using select 2 theme on bootstrap for angular.

By default it has a built in 'search' that filters the option rows. I don't want that row so I've search online for solutions. The common solution is using ng-disabled, which works fine for some browsers but still pops out keyboard on mobiles.

I've used the 'return false' method as described on this plunker : http://plnkr.co/edit/jE0qBpewzvHG5oamB7vQ?p=preview&s=TIKKc2Zmyq5lcvXI

Yet when I open it on mobile (lg g2 on chrome) I have two problems:

1. The keyboard is popped.

2. I can type (strangely I can't type English yet I can type Hebrew)

code as described on pluker:

<ui-select multiple ng-model="multipleDemo.colors" onkeypress="return false;" theme="select2" ng-disabled="disabled" style="width: 300px;">
<ui-select-match placeholder="Select colors...">
  <span ng-if="!disabled">{{$item}}</span>
  <span ng-if="disabled">
    <a class="glyphicon glyphicon-remove" ng-click="$select.removeChoice($index)" tabindex="-1"></a>
    {{$item}}
  </span>
</ui-select-match>
<ui-select-choices repeat="color in availableColors | filter:$select.search">
  {{color}}
</ui-select-choices>

I don't want the keyboard to be popped out, and I don't want to enable the user to type.

This is not reproducible on native android browser, only Chrome.

Answer 1

Eventually I've combined several solutions - the one that helped the most was - html-mobile-forcing-the-soft-keyboard-to-hide

Now my select look like this:

<ui-select 
 ng-model="multipleDemo.colors" 
 onkeypress="return false;" 
 theme="select2" 
 ng-disabled="disabled"
 onfocus="blur();" >
 .
 .
 </ui-select>