allowClear doesn't show the clear button in auiSelect2 (works in Select2)

Confluence Development Confluence Server
, ,
1

Hello all,

I’m trying to get the allowClear property working with auiSelect2. It works perfectly fine with the base Select2 but the so called “visual wrapper” auiSelect2 removes the clear button for some, probably useless, reason. Does anybody know a workaround or will atlassian implement this.

1 Like
2

Dear EricSchneider,

We extend a warm welcome to you in the Atlassian Developer Community.

We highly value your feedback regarding the observed behaviour, which appears to be indicative of a potential bug.

Could we kindly request your cooperation in providing a concise code snippet or demo that demonstrates the issue? I tried to reproduce it myself, but so far I could not spot any difference in treating the allowClear option. It looks like it’s being ignored in all cases.

This would be greatly appreciated. This proactive step would enable the dedicated team responsible for maintaining the library to assess and, potentially, address the problem promptly.

Thank you in advance for your kind assistance.

Best regards,
Greg

3

Hey Greg. Thanks for the feedback. I found out that the close icon exists but it’s “display: none”. Just set the css rule as important and then it works as expected. I’m still wondering why it is “none” on default.

4

Hey @EricSchneider. Thanks for getting back to us.

I also found this “clear” icon, now as you mentioned it.
The display: none rule is in Select2 styles, so I guess: it’s hidden by default to be then controlled by the components JS.

Still, if you could provide us with a demo snippet showing the difference between the AUI wrapper and the original Select2, then we’d be able to pass this to our engineers for triaging.

Please have a look at the CodePen I’ve prepared: https://codepen.io/Greg-Twardowski/pen/bGQGGOx
I could not spot the difference. The allowClear seems to be ignored in single select instances, in both cases.

Kind regards,
Greg

5

@GregTwardowski
allowClear only works if you also define an empty option for the select. And the placeholder property is present (not required tho):
<option></option>
The x button for clearing the value then appears for both libs in your codepen if the empty option is added :slight_smile:
As described in docs:

This option only works when the placeholder is specified.

When attached to a select an option with an empty value must be provided. This is the option that will be selected when the button is pressed since a select box requires at least one selection option.

Not working if the select2 is attached to the input with lazy loading the data :frowning: I workaround this via CSS overriding :confused:

6

Now, as I look at this, it makes sense :smiley:
When the user clears the selection the component selects the provided empty <option>.

This seems to work as expected in both cases (AUI wrapper and original Select2).

Thanks you @MichalZawalski for that. Hope this thread helps someone else in future. I’m passing short info to the AUI team to have a look if their documentation/examples could be clearer.

1 Like