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

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.

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

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.

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