Selection selection does not work in select2

Question

I implemented a select2 widget, version 4. It works, but the x icon. He does not clear the choice.

If you see this document: https://select2.imtqy.com/options.html , it says that this problem is actually, but the documentation for this is incomplete.

Has anyone already decided this?

Thanks Jaime

Answer 1

Finally, I found this to be a bug in Select2 4.0.2.

The solution is this, in select2.js, line 1760.

This needs to be replaced:

this.$element.val(this.placeholder.id).trigger('change'); this.trigger('toggle', {}); 

By:

  this.$element.val(this.placeholder.id).text(this.placeholder.text).trigger('change'); //this.trigger('toggle', {}); 

This solution also causes the dropdown to not appear when the selection is cleared.

Answer 2

No, this is not a mistake. The “X” icon requires a placeholder option. Without it, the clearAllow option cannot be used. So the correct code would be like this:

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

By the way, there is an undocumented option called debug. If you pass it to the select2 () method, the errors found will be printed to the console. For example, the code below:

  $(".js-example-placeholder-single").select2({ //placeholder: "Put some text...", allowClear : true, debug: true }); 

Will get to the browser console:

Why does allowClear require a placeholder option?

The real drop-down list created with the <select> and <option> elements is hidden using select2. And created a new one.

In the drop-down list created by the new creator, the field that the user sees (without the drop-down list) is automatically created. Each time you select a new option, select2 will change the previous field to a new one.

When the X icon is clicked, it will also delete the main field. And creates a new field with placeholder parameters.

Answer 3

In my case, the cleanup button does not work, even the placeholder option is set. I need to add the z-index property:

 .select2-container .select2-selection--single .select2-selection__rendered { z-index:1; }