Select2: Hitting backspace on multi-select converts element to text

[pjclas]

Perhaps this is intended behavior but it seems odd to me. If you use the backspace key to delete an element in a multi-select box, that element doesn't go away like it would if you clicked the 'x'. Instead it is converted to text with an additional space at the end that you have to backspace through to get rid of. Is this intended? Would be nice to have an option to disable it if that is the case. Fiddle providede below:

http://jsfiddle.net/y7fo61ms/

[kevin-brown]

Is this intended?

Yup, totally intentional. https://github.com/select2/select2/commit/395e06aff52059f654aff47f03a26cad8955a092

Would be nice to have an option to disable it if that is the case.

I'm not sure how I feel about having another option for this, I'd like the get the current set documented first. But I can tell you that you can completely erase the search box in Search.searchRemoveChoice and it will do what you are looking for.

[pjclas]

Hmm, ok. I guess I'll have to see if I can wrap my head around this
behavior. Thanks for the info.

On Wednesday, May 13, 2015, Kevin Brown [email protected] wrote:

Is this intended?

Yup, totally intentional. 395e06a
https://github.com/select2/select2/commit/395e06aff52059f654aff47f03a26cad8955a092

Would be nice to have an option to disable it if that is the case.

I'm not sure how I feel about having another option for this, I'd like the
get the current set documented first. But I can tell you that you can
completely erase the search box in Search.searchRemoveChoice
https://github.com/select2/select2/blob/dd9af6893450bbb054ca79546a16bb18198f3e88/src/js/select2/selection/search.js#L127-L135
and it will do what you are looking for.

—
Reply to this email directly or view it on GitHub
https://github.com/select2/select2/issues/3354#issuecomment-101853485.

[smajl]

Wow, I was just surprised by this behavior too. Not what I was used to from 3.5.x. Well, it can be usefull, but there is also a nasty bug, which is already discussed here https://github.com/select2/select2/issues/3297

[tetherit]

How to get the old behaviour? - the new behaviour is very undesirable and users are complaining why can they cannot backspace to remove an item and why does it turn into text. Is there any workaround in the meantime?

[stonexer]

Can't agree with this behaviour. Just vote to get the old one.

[kevin-brown]

Reopening this while we decide how best to handle this.

[Zane-XY]

this is really odd, my tag contains spaces, after I hit backspace, it breaks down to more small tags automatically, and it seems I can never delete all of them.

[heebj]

+1

[ldaguise]

I also vote for having an option to get back the old behaviour.
Thanks

[giangt]

+1
Thanks.

[ghost]

+1

[rnt363]

Hey could someone by chance (@kevin-brown) explain if there's a way to override the Search.searchRemoveChoice without forking the repo? I'm trying to avoid this issue: https://github.com/select2/select2/issues/3297 by just removing the whole pill

Thanks!

[zyphlar]

:+1: I can't decide if Chosen is better despite not being able to keep the multi-select window open after selection, or if Select2 is better despite really buggy backspace behavior.

[kevin-brown]

Hey could someone by chance (@kevin-brown) explain if there's a way to override the Search.searchRemoveChoice without forking the repo?

You can patch this method (not totally recommended but it gets the job done) or create a custom decorator (lacking docs to link to) that overrides this method.

Here's a jsfiddle that demonstrates the patching method

https://jsfiddle.net/zmh90ewu/

And here's the code for it

$.fn.select2.amd.require(['select2/selection/search'], function (Search) {
    var oldRemoveChoice = Search.prototype.searchRemoveChoice;

    Search.prototype.searchRemoveChoice = function () {
        oldRemoveChoice.apply(this, arguments);
        this.$search.val('');
    };

    $('#test').select2({
        width:'300px'
    });
});

[zyphlar]

Greatly appreciated, @kevin-brown ! That works, thanks. :heart:

[giangt]

Thanks @kevin-brown :+1:

[SlyDave]

+1 To have this option,this confused the hell out of our focus group when testing our UI which implements select2 4.0.0, causing multiple bouts of frustration.

Thanks for the patch, that'll suffice for now

[Intrepidd]

This is very weird, in my case when you hit backspace for the first time the value disappears but is not immediately converted to text, you have to press backspace again to convert it to text.

I also have something similar on your example page but only on the second try :

[SlyDave]

@Intrepidd, you should log this as a separate issue imho. I too experience this. (on FF and Chrome, Windows 7 64bit) on both the examples page for select2 and our own implementations.

(However for me the behaviour was undesired, so I've "resolved" it by changing the backspace behaviour to remove the entire pill, rather than converting it to text)

[suqi]

+1

[corvuscornix]

+1 and thanks a lot @kevin-brown for the patch!

[pugnascotia]

+1, would really like to be able to delete a whole tag on backspace.

[tuomassalo]

I believe the use case of not removing the whole tag relies on the idea of

1. the case when you can add new tags on the fly (which is not enabled behaviour anyway) or
2. saving some keystrokes when trying (which IMHO does not justify the current behavior: clarity should win over brevity).

Besides, the current behavior is severaly broken. When you press backspace, the tag is removed and _a cropped part_ of the tag text is shown. This happens at least on:

Latest Chrome / OSX:

Latest Firefox / OSX:

IE11 / Win7:

Thus, +1 for eg. the this.$search.val(''); fix, and maybe a +½ for an option to re-enable the current behavior (sans bugs).

[arg]

:+1:. This behavior is really confusing. Would be nice to have an option to turn it off.

[Sasha4ever]

+1

[dpnevmatikos]

+1

[sirNemanjapro]

+1

[kikimor]

+1

[kevin-brown]

Just going to note that a patch is available for this in https://github.com/select2/select2/issues/3354#issuecomment-132389291.

The problem with the search box being cut off was fixed in 4.0.1.

[pugnascotia]

Hmm - last time I tried the patch it didn't work, but this time it did. Whoops. PEBKAC.

[kikimor]

@kevin-brown, patch in https://github.com/select2/select2/issues/3354#issuecomment-132389291 does not completely solve the problem if minimumInputLength = 0.

searchRemoveChoice() calls this.handleSearch() with search query != '' (empty string), so the correct solution (but not perfect, I think) is fully overriden searchRemoveChoice():

$.fn.select2.amd.require(['select2/selection/search'], function (Search) {
    Search.prototype.searchRemoveChoice = function (decorated, item) {
        this.trigger('unselect', {
            data: item
        });

        this.$search.val('');
        this.handleSearch();
    };
});

[jmlacroix]

I have 2 use cases in my app where I use select2: a free-form tag list and a dropdown list with multiple choices. Let's have a look at the backspace behavior from the context of a user.

Tags: As a user, I'm typing a list of tags from the keyboard and select some that are already in the list. I expect to be able to quickly edit them and correct my mistakes with backspace. As a result, the current behavior of editing the selection when hitting backspace works well for tags because they are free-form.

Multiple choices: As a user, I am provided a list of options from which I can select one or many. I do not expect to be able to modify those choices (and if I try, I get a "No results found" message). As a result, the current behavior of allowing a user to edit the selection when hitting backspace is unexpected because it is a search helper.

I would use both behaviors in my app, depending on the context.

Hope this brings a useful point of view.

[stretch4x4]

We patched this locally, so I have submitted a pull request.
Currently our items have a code as the ID and a description as the text, the text is just there to help, we actually only care about the code. The current behaviour was no good to us as backspace would remove our code tag and replace it with a massive description instead of allowing editing of the code directly.

I created the option so that you could specify a string, if it matched a key on the item this is what is returned else if blank then the search will remain empty. Hopefully this helps most people.

@kevin-brown you mentioned documenting the current set of options before adding more, if you point me in the right direction I might be able to make a start on this. I am certainly not aware of all the options but could document as many as I have used / can find if that will help with this issue.

Cheers

[adopilot]

sory for spaming
Does this sill open or can be pached whit version 4.0.1 ?
I am using it on MVC VS2015 and get Selcet2 via nuget.
I am facing this problem

[kevin-brown]

@adopilot The patch mentioned in https://github.com/select2/select2/issues/3354#issuecomment-132389291 still works for 4.0.1 and will likely continue to work in the future until a more complete patch is brought in.

[sirNemanjapro]

@kevin-brown The patch mentioned in #3354 (comment) does not fully work with 4.0.1 because in some cases, after removing the tag it converts the tag back to text which then needs to be deleted as well.

[kohepu]

+1. The new behaviour is a nice feature, but it is confusing in some contexts.

[RohovDmytro]

+1. The behaviour is confusing, oh yeah.

It would be nice to have an option to bypass this.

[guoyunhe]

+1. Think it is better to have an option to delete the tag completely when user type backspace. Otherwise users might have to type too much times or have to use mouse click when deleting unwanted tags.

[guoyunhe]

When type backspace several times

[chrisrueger]

+1 have an option to delete tag completely when user presses backspace.

[petrprikryl]

+1 need delete whole tag on backspace press

[fernicolosi]

+1

[Tsuyoshi84]

+1

[isaak-zmg]

my english is not good,there is my method:

var $eventSelect = $(".roles_selcet2");
$eventSelect.on("select2:unselect", () => {
        $eventSelect.on("select2:open", () => {
            $(".select2-search__field").val("");
        })

    })

hope can be help

[ghilios]

I ran into some issues with the callback not being called before other application code pulled in select2 via a require. To ensure this runs synchronously (before the original searchRemoveChoice is cached in a DecoratedMethod), use the following modification

$.fn.select2.amd.require(['select2/selection/search'], function (Search) {
    Search.prototype.searchRemoveChoice = function (decorated, item) {
        this.trigger('unselect', {
            data: item
        });

        this.$search.val('');
        this.handleSearch();
    };
}, null, true);

[xxRockOnxx]

+1

EDIT

Another effective solution that I use:

$('.select-element').on('select2:unselect': function(event) {
    $el = $(this)
    setTimeout(function() {
        $('.select2-search__field', $el.closest('.form-group'))
            .val('')
    }, 0)
}

[Ecksters]

+1

[erakis]

+1 to add the options proposed by @chrisrueger
https://github.com/DVD27/select2/commit/5800beea87dd9ab9dc294a4e0bcc7b5ab825c147

It make more sense
Best regards,

[pptyasar]

+1

[petrlosa]

+1

[thejoeejoee]

+1

[markoj3s]

+1

[recepkutuk]

I even have a case where I would prefer the tags to be removed only by clicking the "x" icon, so: +1

Edit: I found and deleted this part:

if (key === KEYS.BACKSPACE && self.$search.val() === '') {

    var $previousChoice = self.$searchContainer
      .prev('.select2-selection__choice');

    if ($previousChoice.length > 0) {
      var item = $previousChoice.data('data');

      self.searchRemoveChoice(item);

      evt.preventDefault();
    }
  }

This solved my problem for the time being

[guyisra]

Are updates on this? this is a severe usability issue, especially on mobile where ever tap counts
Why does this need to wait until for a new release and not fixed? this is a bug, not a feature

[alexweissman]

It's not a bug, as described in @kevin-brown's original response. However it does seem like there are enough people asking for this, that it should be added as a configuration option. Could also help to address the accessibility issue described in #4105.

[Karmalakas]

+1

Especially, when I'm using a templateSelection. I have to pass my text as some|text|part and in selection show only some. In this case, pressing Backspace, converts some to full editable some|text|part string.

[legshooter]

@jmlacroix hit the nail on the head.

So a configuration option is very much needed.

And if I had to choose a default, I'd go with completely deleting the tag, because otherwise it doesn't make sense at all in the scenario where the user is choosing from premade options -- but does kinda work the other way around, just makes the user work a bit more, i.e. re-typing.

[henrynw]

+1

Please! :)

[henrynw]

Got around this by commenting out this line (2123 in 4.0.6-rc.0):
//this.$search.val(item.text);

Context:

Search.prototype.searchRemoveChoice = function (decorated, item) {
this.trigger('unselect', {
data: item
});

//this.$search.val(item.text);
this.handleSearch();

};

[pedrofurtado]

We don't have immediate plans to provide this. We are focused to fix some major UI bugs (that are majority of issues and PR's). But if you open a PR with unit tests, I will be glad to review and approve if everything is ok :+1:

[Karmalakas]

@pedrofurtado, why are you closing unresolved feature requests? If it's lower priority, than UI bug fixes, there's no need to close them, especially if you're asking for PRs. Or will they be reopened after bugs are fixed?

[jakeNiemiec]

@Karmalakas see this about issue purge: https://github.com/select2/select2/issues/5367

[Karmalakas]

Looks like randomly clicking a "Close" button :/

[stouch]

That worked for me :

$(".your-select").select2();    
$(".your-select").on('select2:unselect', function (event) {
        var $el = $(this)
        setTimeout(function () {
            $('.select2-search__field', $el.closest('.form-row')).focus();
            $el.select2('open');
            $('.select2-search__field', $el.closest('.form-row')).val('');
        }, 0)
});
$(".your-select").on('select2:select', function (event) {
        var $el = $(this);
        $el.select2('open');
        setTimeout(function () {
            $('.select2-search__field', $el.closest('.form-row')).focus();
        });
    });
}

[felipebn]

Another solution:

(function($select2Obj){
    $select2Obj
        .parent()
        .find('.select2-selection')
        .on('keydown', '.select2-search--inline', function(evt){
            var backspaceKey = 8;
            if(evt.which == backspaceKey){
                var currentSelection = $select2Obj.select2('data').map(function(s){return s.id});
                $select2Obj.val(currentSelection).trigger("change");
                $select2Obj.select2("close");
            }
        })
})($("#yourSelect2Id"));

Also for customizing the selection and result template, avoid encoding your values using separators like option text|another useful info that will go in a tooltip and include them in the JSON you provide as select2 data, easier and does not have issues with the backspace situation.

edit: typo

[Reforced]

+1, Please provide a simple option if possible.. e.g. $("#foobar").select2({ clearTermOnBackspace: true })
Thanks @kevin-brown for https://github.com/select2/select2/issues/3354#issuecomment-132389291

[maxcorbeau]

The way I see things:

• 1 key benefits of select boxes is that users don't have to type it all
• So if users don't have to type it all
• Why make them untype it all?

Current behaviour means it can be considerably more work to UNDO than to DO which seems a UX anomaly (it's normally the other way around, you can simply delete, do Ctrl+Z, press cancel/previous etc...).

Example from the official demos https://select2.org/selections#limiting-the-number-of-selections:

• Selecting California = 2 keystrokes (C+Enter)
• Unselecting California = 11 keystores (1 initial backspace + 1 for each character)

Hence why IMO an option to allow removing the entire tag with 1 backspace would be good (clicking on the X icon forces the use of the mouse which reduces productivity as we need to get hands off the keyboard, click, and back on keyboard again).

[hiteshsuthar]

+1, Please provide a simple option if possible.. e.g. $("#foobar").select2({ clearTermOnBackspace: true })
Thanks @kevin-brown for #3354 (comment)

In case, we have multi select dropdown and we have selected some of the items. Now, when I remove one item, either it removes all the items from the selection or it just edits the last selected item and I need to press backspace so many times.

Is there any chance of getting this option?

[maxcorbeau]

@kevin-brown : any timeline for merging https://github.com/select2/select2/pull/5752 ? Many thanks.

[benkoshy]

(function($select2Obj){
  $select2Obj
      .parent()
      .find('.select2-selection')
      .on('keydown', '.select2-search--inline', function(evt){
          var backspaceKey = 8;
          if(evt.which == backspaceKey){
              var currentSelection = $select2Obj.select2('data').map(function(s){return s.id});
              $select2Obj.val(currentSelection).trigger("change");
              $select2Obj.select2("close");
          }
      })
})($("#yourSelect2Id"));

@felipebn Thanks for your answer: would you know how one would integrate the above into their existing select2 javascript code? Here is my existing javascript file:

import $ from 'jquery'
import 'select2/dist/css/select2.css'
import 'select2'

window.addEventListener('turbolinks:load', () => {
  var select2 = $('.select2').select2({
    tags: true,
    tokenSeparators: [',', ' ', ";"],
    maximumInputLength: 5000
  });
})

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[kevin-brown]

At this point the behaviour is super broken depending on the options you're using. This will likely be fixed once we figure out the best way to handle deleting choices using the keyboard. That might mean changing the backspace key to instead focus the last option, with a second backspace meaning removing it entirely. Also the backspace key might be unbound for the "clear all" option, since apparently we don't consistently pick one of the other.

[benkoshy]

@kevin-brown chrs for the update.

[kevin-brown]

One of the tracking WAI ARIA tickets that will allow us to figure out a good pattern for keyboard accessibility is https://github.com/w3c/aria/issues/689. Unfortunately it looks like that ticket has gone silent, so it may need to be kicked up again with some suggestions.

Until then I'm going to hold off on changing this behaviour around significantly. Right now the only way we can be somewhat accessible is by having it behave the way it currently does.

[vsajip]

Not sure if a different issue, but when I press backspace I get a completely unrelated option removed from the select. See

https://jsfiddle.net/vsajip/pd642s5m/1/

for a demonstration. Notice how the "red" entry disappears after the first backspace, as well as losing the "black" pill:

[mowali]

so, all of these comments and still no solution!
OK, anything in the backlog of this library to get this issue fixed?

[VictorDPuch]

im using "Select2 4.1.0-beta.1"

Just replace the next line on script

}), this.$search.val(t.text), this.handleSearch()

for this one

}), this.$search.val(''), this.handleSearch()