allowClear conflicts with selectOnClose

[phazei]

Create select with a couple options and enable the options allowClear and selectOnClose

When the "x" is clicked on the clear, the select box opens with first item highlighted. Close box, and now it's selected.

Basically, there's no way to clear if selectOnClose is on...

[phazei]

I think just not opening when the x is clicked should take care of it, easier said than done though

[phazei]

Removing line 65:

    this.trigger('toggle', {});

of allowClear.js fixes the issue. If it's being cleared, it should go away, not open

[kevin-brown]

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

• What browser(s) and Operating System have you tested with?
• Does the bug happen consistently across all tested browsers?
• Can you reproduce this issue on the examples page?
• 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.

[phazei]

I'm using Select2 4.0.3, ubuntu 16.04, chrome

https://jsfiddle.net/phazei/64nxhLc1/

[phazei]

I have a temp fix with this:

s2Obj.$selection.on('mousedown', '.select2-selection__clear', function (evt) {
                    s2Obj.close();
                    s2Obj.$element.val(null).trigger('change');
                    evt.preventDefault();
                });

Basically clears it a second time after it was cleared but reselected the first time

[drvid]

+1 for a fix to this issue please... I use selectOnClose to facilitate keyboard only input, using tab to select/close and move focus to the next form field.

IMHO the clear button should not toggle the select2 menu, as in it should be 'clear-able' with the menu open or closed.

[gravelld]

As far as I can see... and more generally... it's impossible to submit an empty selection if selectOnClose is true isn't it?

The same thing happens when you click the 'x' remove icons for individual tags. When the final one is clicked, the search box selects an item, and on blur that items is selected again. see #3209 (comment)

[jophj]

@gravelld exactly

[gravelld]

Actually, looks like the remove icons are covered here: #3209 (comment)

[boily-qubeos]

Is there any fix for this issue?
I'm facing the same problem.
Thanks a lot
Roger

[stesvis]

This is a very common scenario, is it gonna be fixed?
I definitely need this too.
THanks

[stesvis]

@phazei I am trying your temporary fix, but i am not sure I understand..
In s2Obj.$selection and s2Obj.$element I can guess that s2Obj is you actual dropdown (), but what are $selection and $element?

[phazei]

Nope, $selection and $element are internal things to s2, they come with the object which is defined like so:

element.select2(options);
s2Obj = $(element).data('select2');

[DaJoBro]

I like to solve Problems like this using the options attributes, so I figured this out:
In options:
minimumInputLength: 1, language: { inputTooShort: function () { return ''; } }
Unfortunately, this will leave you with a small empty box at the bottom, which you can prevent by using CSS:
.select2-results__option.select2-results__message:empty { display: none; }
Depending on your browser you will still have a small shadow on the bottom of the box.
I thought this might help some people looking for an easy workaround.

But IMO it is strange that this issue isn't fixed yet, this is a common scenario in my applications too. There should be an option to disable opening the menu on clearing, as this is frequently requested and most workarounds will collide with selectOnClose. Alternatively, you should disable selectOnClose if there is no input.

[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.

[vetezeTE]

This is still an issue in the latest 4.1.0-rc.0

With options.selectOnClose = true and options.allowClear = true it clears the selection the when you click the X but then selects whatever option is active in the list.