CODEWITHSUNDEEP
javascriptandroidangularjsselectize.js
emersonthis
emersonthis

Reputation: 33378

selectize causes keyboard to appear on Android

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

Upvotes: 4

Views: 4023

Answers (4)

wohral
wohral

Reputation: 85

This worked for me:

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

Also worked:

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

Upvotes: 5

Andrew Grothe
Andrew Grothe

Reputation: 2374

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.

Upvotes: 8

gmo
gmo

Reputation: 9000

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.

Upvotes: 0

dnozay
dnozay

Reputation: 24324

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.

Upvotes: 0

Related Questions