CODEWITHSUNDEEP
jqueryjquery-select2
Dylan Caudill
Dylan Caudill

Reputation: 1191

Keep focus after selection is made Select2

I'm having an issue with Select2 keeping focus after a selection is made. I have some long forms in my application that need to be tabbed through. Right now, once a selection is made with Select2, focus is lost and so it's not possible to tab to the next field.

You can test this on their examples page. The standard select field allows tabbing after the selection is made, the Select2 field does now.

Edit: Example of an area where I use Select2.

HTML:

<div class="form-group">
    @Html.LabelFor(m => m.Addresses[i].City)
    @Html.TextBoxFor(m => m.Addresses[i].City, new { @class = "form-control jsAddressCity" })
    @Html.ValidationMessageFor(m => m.Addresses[i].City)
</div>

<div class="form-group">
    @Html.LabelFor(m => m.Addresses[i].StateId)
    @Html.DropDownListFor(m => m.Addresses[i].StateId, new SelectList(Model.StatesList, "Id", "Code", Model.Addresses[i].StateId), "Select State", new { @class = "form-control jsAddressStateId jsSelect2" })
    @Html.ValidationMessageFor(m => m.Addresses[i].StateId)
</div>

<div class="form-group">
    @Html.LabelFor(m => m.Addresses[i].Zip)
    @Html.TextBoxFor(m => m.Addresses[i].Zip, new { @class = "form-control jsAddressZip" })
    @Html.ValidationMessageFor(m => m.Addresses[i].Zip)
</div>

JS:

        $(".jsSelect2").select2({
            width: "100%",
            theme: 'bootstrap'
        });

Upvotes: 2

Views: 6845

Answers (2)

Vivek Choudhary
Vivek Choudhary

Reputation: 684

To keep the select2 focused and open after selecting an option, we just need to provide an additional parameter while loading it. 

$(".jsSelect2").select2({
        width: "100%",
        theme: 'bootstrap',
        closeOnSelect: false
    });

Hope this will help someone in the future.

Upvotes: 3

Luis Figueroa
Luis Figueroa

Reputation: 46

I had the same issue. It's a bug in version 4.0.3, Use select2 4.0.2 instead

Upvotes: 3

Related Questions