Select2 Is Duplicating My Dropdown List

Select2 is duplicating my dropdown list so I have both the original select list and also the select2 select box, I have been unable to recreate it outside of my project so it could

Solution 1:

I found out that the issue was caused by my use of css on the original list element. Select2 works by applying the class select2-hidden-accessible to the actual select field I wrote.

That class has CSS that, among other things, shrinks the original select field to 1px width so it is not visible. Then it renders its own span classes that have the select2 functionality based on the content from the original select element.

CSS on .form_inputs select{} was overriding this shrinking to 1px width.

Solution 2:

It's old but always useful !

I forgot to import the CSS for select2... That was why it didn't work and displayed the select twice.

I hope it'll be helpful !