Select2 Bootstrap5 Unable To Type In Input

washuit-iamm

https://live.datatables.net/hehoditi/2/edit

Open the editor, click "priority" and try and type in the input. This is the select2 tagging option. See it work here: https://select2.org/tagging

I have been working on this for a while and theres a few threads out there like here and even the official docs here.

The short answer is "just add dropdownParent: $('#myModal') to the select2 options".

However I am unable to apply that because I am using Editor + Editor Select2 Plugin. In the plugin's create method is where the input is created and select2 is initialized long before there is a modal.

So I believe the Select2 plugin needs to be edited but I am hitting my limit on how. My first idea is that maybe the editor instance needs to be obtained in create, and the select2 input needs to be initialized only after the modal is created?

washuit-iamm

I have an idea here: https://live.datatables.net/hehoditi/3/edit

This works. But is it OK to use?

I simply wrap much of the create: code in this.one("open", function(){ ... }); and I add dropdownParent: $(".modal"), to the .select2(opts).

I believe this works because the modal is created and ready?

allan

Nice one! Yes, I think you are correct - if you need the modal element to pass to Select2, then yes, you'll need to delay its creation until the modal is on screen (or possibly fetch it using displayNode()). I've used that approach for a few things such as the wysiwyg plugins as well.

Allan