CODEWITHSUNDEEP
javascriptjqueryjquery-pluginsjquery-select2
SeaBass
SeaBass

Reputation: 1764

Keep select2 open only on shift-select

I use select2 to add tags. There is an option to keep the select list open on selecting an item (closeOnSelect), but how can I make this happen only if the shift key is pressed while selecting it? Try setting closeOnSelect to false to see what I want to happen only when the shift key is pressed.

Here's a list of API options: https://select2.org/configuration/options-api

Here's a list of events: https://select2.org/programmatic-control/events

$(".form-control").select2({
    tags: true,
    tokenSeparators: [',', ' '],
    closeOnSelect: true
})
.on('select2:select', function (e) {
    // How can I reach shiftKey here?
    if( e.shiftKey )
    {
        alert('How do I make closeOnSelect: false happen here?');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control" multiple="multiple" style="width: 300px">
  <option selected="selected">orange</option>
  <option>white</option>
  <option selected="selected">purple</option>
</select>

Upvotes: 0

Views: 1100

Answers (1)

Ballsigno
Ballsigno

Reputation: 501

I think you have two choices. You may don't know, but select2 seems to have a similar function; it checks if the control key is being held. Let's see select2.js, and search // Don't close if the control key is being held. I think it's easy that you modify that part of the plugin directly, rather than implement yourself.
(I couldn't find the way of overwriting the function.)

However, I'm also found the way.
But maybe sometimes can't prevent to close select2 ...

Firstly, you need to keydown and keyup event at the 2 part.

// jQuery keydown doesn't work for some reason.(It seems this plugin is a bit tricky.)
// This event is used when the text box has focus.
document.getElementsByClassName('select2-search__field')[0].onkeydown = function(e) {
    if (e.keyCode === 16) {
        isShiftDown = true;
    }
}
document.getElementsByClassName('select2-search__field')[0].onkeyup = function(e) {
    if (e.keyCode === 16) {
        isShiftDown = false;
    }
}

// This event is used when the text box doesn't has focus.
$(window).on("keydown", function(e) {
    if (e.keyCode === 16) {
        isShiftDown = true;
    }
}).on("keyup", function(e) {
    if (e.keyCode === 16) {
        isShiftDown = false;
    }
});

Secondly, add closing event.

// Closing (if you return false in this event, select2 doesn't close.)
.on('select2:closing', function () {
    // To be exact, there's no need to return true.
    return !isShiftDown;
});

Of course, even though you success to implement, the Ctrl key function still exists.
For Example.

UPDATED
Add logic, considering "If it's multiple" and "If it isn't present". Just in case.

var inputs = document.getElementsByClassName('select2-search__field');
if (inputs.length > 0) {
    for (var i=0; i<inputs.length; i++) {
        inputs[i].onkeydown = function(e) {
            if (e.keyCode === 16) {
                isShiftDown = true;
            }
        }
        inputs[i].onkeyup = function(e) {
            if (e.keyCode === 16) {
                isShiftDown = false;
            }
        }
    }
}

Upvotes: 1

Related Questions