allowClear gives "Uncaught TypeError: Cannot read property 'id' of undefined" when used on single select boxes with ajax load

[RabenErland]

We are using ajax to load data remotely to a single select box. It works just fine, but if allowClear is enabled (set to true) a javascript error is encountered in select2 when the clear mark is clicked in the select box - and the value is not cleared from the box.

The error is:
Uncaught TypeError: Cannot read property 'id' of undefined
S2.define.AllowClear._handleClear @ select2.js:1721
S2.define.Utils.Decorate.calledMethod @ select2.js:571
(anonymous function) @ select2.js:1681
n.event.dispatch @ jquery-2.1.4.min.js:3
n.event.add.r.handle @ jquery-2.1.4.min.js:3

[kevin-brown]

I'm going to take a guess and say that you are not using allowClear with the placeholder option which triggers undefined behaviour on single selects.

---

Can you expand upon the issue you are facing by adding a few more pieces of information to your bug report?

• What steps can be used to reproduce the issue?
• What is the bug and what is the expected outcome?
• What browser(s) and Operating System have you tested with?
• Does the bug happen consistently across all tested browsers?
• What version of jQuery are you using? And what version of Select2?
• Are you using Select2 with other plugins?

The contributing guide contains a useful section with a few questions which can help us track down the bug and speed up the process of finding a fix for it. The creation of an isolated test case would also be useful.

[pgasidlo]

Select2: v4.0.0, jQuery: v1.11.1, Linux, Chrome

$ajax.select2({
  /* Added this */
  allowClear: true,
  ajax: {
    // from example with github repository search
  },
  // ...
  templateResult: formatRepo,
  templateSelection: formatRepoSelection
});

Clicking on clear icon raises exception, on:

Function: AllowClear.prototype._handleClear = function (_, evt)

Code:

this.$element.val(this.placeholder.id).trigger('change');

Why: this.placeholder is undefined

Workaround:

$ajax.select2({
  allowClear: true,
  /* Add this */
  placeholder: {
    id: "",
    placeholder: "Leave blank to ..."
  },
  ajax: {
    // from example with github repository search
  },
  // ...
  templateResult: function(item) {
    /* FIX */
    if (item.placeholder) return item.placeholder;
    return formatRepo(item);
  },
  templateSelection: function (item) {
    /* FIX */
    if (item.placeholder) return item.placeholder;
    return formatRepoSelection(item);
  }
});

[TimNZ]

+1 for pgasidlo description, there is no check that this.placeholder is defined in AllowClear.prototype._handleClear

[kevin-brown]

This is a duplicate of #3016, you can see the error if you add debug: true.

[ellej16]

@pgasidlo , you're a lifesaver. +1 !

[AsyncLegs]

@pgasidlo Thank a lot buddy!

[karray]

using @pgasidlo's work around the initial placeholder will be overridden after clear

[akositey]

Still having this issue in version 4.0.3, because the allowClear: true while placeholder is not set. Solution would be to set the placeholder even if its blank.

$(".js-example-placeholder-single").select2({
  placeholder: "",
  allowClear: true
});

or set it globally:
$.fn.select2.defaults.set( "placeholder", "" );

[glalwani2]

After following the above solution, when I am selecting an option after doing clear all once, I am getting two selected options : 1) which i have selected and 2) -Select-
Can anybody tell me why? I am using Select2 with AngularJs bindings

[alexweissman]

@glalwani2 it may be a known bug. Please search the open issues.

[malas]

i can also confirm, that the bug is still here in v4.0.3.

@akositey proposed fix to add blank placeholder is a working workaround.

[alexweissman]

Is this not documented anywhere on the site? Also, you know that the current version is 4.0.6-rc.0, right?

[malas]

@alexweissman i can confirm, that the same behaviour is in the version 4.0.6-rc.0 too.

and i did not ee anywhere mentioned that in case you use allowClear you must also provide placeholder option.

[alexweissman]

Ok, I will reopen this so that I remember to update the docs.

[stale]

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.

[ManuelHaas]

Bug still exists in 4.0.13!

[samadanc]

@ManuelHaas Can confirm to this. The bug still persists.

[vipertecpro]

Hello devs, this is my laravel web-pack info for select2
"select2": "^4.0.13",
Can we put some kind of check if element doesn't exist

This is how i am using for multi select

import select2 from 'select2';
select2($);
 /**
     * Multiple Select
     * */
    $.fn.select2.defaults.set( "placeholder", "" );
    $(".form-select").select2({
        closeOnSelect: false,
        placeholder: "",
        multiple: true,
        allowClear: true,
    });

[robozb]

The problem still persists
var data = [
{
id: 0,
text: 'enhancement'
},
{
id: 1,
text: 'bug'
},
{
id: 2,
text: 'duplicate'
},
{
id: 3,
text: 'invalid'
},
{
id: 4,
text: 'wontfix'
}
];

            $("#eventListKontener").select2({
                allowClear: true,
                data: data,
                width: "100%",
                placeholder: ""
            })

    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>