selectize causes keyboard to appear on Android

Question

On Android, when the selector is touched, the keyboard input appears. I suspect this is because the generated input is of type="text".

How can I prevent this from happening? If the user is choosing from a drop-down list, it does not make sense for the keyboard to appear.

I'm implementing selectize as an Angular module angular-selectize, but I checked with the developer and the issue is not specific to the angular wrapper.

Here is my code:

        <selectize  ng-model="filters.min_bedrooms" 
                    options="[
                            {title:'0', id:0},
                            {title:'1', id:1},
                            {title:'2', id:2},
                            ]">
        </selectize>

Which generates this markup:

<input type="text" autocomplete="off" tabindex="" style="width: 4px; opacity: 0; position: absolute; left: -10000px;">

Answer 1

I had the same issue, where I want the user to select a value but not enter any new values, and the keyboard always shows up when you tap on the dropdown on an iPad. I've solved it by this:

$('#myDropDownId').selectize({
    create: true,
    sortField: 'date'
});
$(".selectize-input input").attr('readonly','readonly');

Basically what happens is, the input gets focus when you click/tap on the dropdown, and that is what shows the keyboard. By setting readonly to false, the input no longer gets focus.

I've tested this on an iPad Mini 2 in Safari and Chrome.