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;">

Laocoon

And the question/desired effect is? – Orthodontics

The question is updated. Why is that happening and how can I prevent it? – Laocoon

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 combination of text & select? Please correct me if I understand it wrong. – Orthodontics

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. – Laocoon

Something like this will help?... jsfiddle.net/gmolop/3m57zru4 – Orthodontics

@Orthodontics that looks like the right idea. Thanks. Perhaps consider submitting it as an answer? – Laocoon

@SDP Creator here – this isn't what selectize is designed to do. If you're just interested in select decoration, I'd chose something else / simpler. – Anthracosis

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.

Supersensitive

I personally used .prop('readonly', true) instead of .attr() – Guntar

If you don't want users to enter new values, why use create: true? – Constabulary

Answer 2

This worked for me:

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

Also worked:

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

Thar

Just to add, in Angular 8, call above jquery inside ngAfterViewInit – Rainproof

Answer 3

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.

Miamiami

Can you expand on what you are suggesting? Or maybe mention how it could be done? – Laocoon

Answer 4

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.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.0/js/standalone/selectize.js"></script>
<link href="https://cdnjs.cloudflare.com/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.}

Orthodontics