Select2: Select2 menu does not allow input into the search text field

[krschacht]

I just added a select2 element in one new place on my site and it doesn't work correctly. The user can drop-down the menu and select an option, but the search text is disabled.

I've begun tracing out the code and I can't find any explanation yet. The only clue I can find in chrome inspector is one: normally a class is added to the text input on focus. I notice this class is oscillating--adding & removing itself.

Any clue what would cause? If you want to repro:

http://dev.tacktile.org/home
Search "grasshopper"
Click an image to view dialog
Click blue Download button
Click the Tack button that appears above Download

There is a select menu that appears beneath the photo. This is the broken menu.

[ivaynberg]

see #1147

[imuneer]

same issue with me using metronic bootstrap 3 template. Looking into @ivaynberg link.

[imuneer]

Go the solution. It is because of the select is on top of bootstrap modal.
It worked when tabindex="-1" was removed from bootstrap modal.

I found the solution from http://stackoverflow.com/a/18487440/375551

[amerzur]

same issue with knockout js , the search box not clickable

data-bind="options: Workouts, optionsText: 'WorkoutName', optionsValue: 'WorkoutID', value: SelectedWorkout, select2: { formatSelection: select2Formate, formatResult: select2Formate }">

[lnmunhoz]

@imuneer Thanks

[tiohpih]

@imuneer thank you so much! It worked for me !

[imcrainjames]

Awesome. Thanks! Worked for me too.

[DannyFeliz]

@imuneer Thanks! 🎉

[Rushil57]

@imuneer Thanks a lot! You saved my time. 👍

[alexvazquez]

Great this solved me 5 hours of tests

[mazhisai]

while removing tabindex="-1" does make the search box editable, its not a solution because it now breaks the accessibility of my page. The modal window is no longer active and accessible from keyboard. whats worse, the parent window can be tabbed into. is there an alternative solution here that doestn break accessiblity? thanks!

[mnrafg]

@imuneer Thank you, your solution fixed the issue for me.

[ankitkumarsuthar]

@mazhisai I have the same issue now my model is not closing on Esc key. Have you found any alternate solution?

[mazhisai]

@ankitkumarsuthar Sorry, I don't have a better solution. I ended up removing tabindex as a workaround.

[hassanskylinxtech]

@imuneer Thanks

[wasabigeek]

a kind soul shared an alternative: https://github.com/select2/select2/issues/4871#issuecomment-306700381

[fsevenm]

Thanks, it helps me.

[TranHaiQuan]

https://select2.org/troubleshooting/common-problems#select2-does-not-function-properly-when-i-use-it-inside-a-bootst
If you use select2 in modal so resolve in this link,
you must config dropdownparent

[milwer]

Thank you so much