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" autoplete="off" tabindex="" style="width: 4px; opacity: 0; position: absolute; left: -10000px;">

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" autoplete="off" tabindex="" style="width: 4px; opacity: 0; position: absolute; left: -10000px;">

• javascript
• android
• angularjs
• selectize.js

• And the question/desired effect is? – gmo Commented Feb 18, 2015 at 9:29
• The question is updated. Why is that happening and how can I prevent it? – emersonthis Commented Feb 18, 2015 at 16:32
• If I understand correctly, you want to prevent the user can type in this field? .. So what sense does it make to use selectize.js when their main objective is the bination of text & select? Please correct me if I understand it wrong. – gmo Commented Feb 18, 2015 at 16:41
• You understand right. But selectize is able to make a normal select also. This use case seems clearly supported based on the documentation... For example there is an option to turn OFF the create feature. – emersonthis Commented Feb 19, 2015 at 11:31
• Something like this will help?... jsfiddle/gmolop/3m57zru4 – gmo Commented Feb 19, 2015 at 13:54

4 Answers 4

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.

This worked for me:

$(".selectize-input input").attr('readonly','readonly');

Also worked:

$(".selectize-input input").prop('readonly','readonly');

Quoting http://brianreavis.github.io/selectize.js/:

Selectize is the hybrid of a textbox and <select> box.

It is not a pure <select> UI widget equivalent; it is not a dropdown-only widget. If you want to use it as such, you will need to disable/hide the <input> element while keeping the whole directive working.

If I understand correctly, you want to prevent the user can type in this text field...
^{(ergo, no keyboard on focus, but still will be able to select one of the dropdown options)}

So, as you said this is exactly what you want, and as far as I know this is not possible to do it with default options, it occurs to me to do this disabling the input field ^(readonly) on focus event, and turn it back again when loose focus (blur event).
With this, the user is able to select another tag after the first one.

Check out this example...

var tags = [{
    id: '1',
    value: 'first'
}, {
    id: '2',
    value: 'second'
}, {
    id: '3',
    value: 'third'
}, ];

// initialize the selectize control

var $select = jQuery('#test').selectize({
    create: true,
    closeAfterSelect: true,
    options: tags,
    valueField: 'id',
    labelField: 'value'
});
var selectize = $select[0].selectize;

selectize.on('focus', function () {
    jQuery('.readonly').find('input').attr('readonly', true);
});

selectize.on('change', function () {
    selectize.blur();
});

selectize.on('blur', function () {
    jQuery('.readonly').find('input').attr('readonly', false);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare./ajax/libs/selectize.js/0.12.0/js/standalone/selectize.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/selectize.js/0.12.0/css/selectize.css" rel="stylesheet"/>

<label>test
    <input class="readonly" name="test" id="test" />
</label>

It's an approach, but I think this could be enough depending on your needs.
^{(or at least, point you in the right direction)}

^{JSFiddle file in case the embed snippet don't work as expected.}