search field Select2 seems not to work with Bootstrap5

Ficos

testcase

var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.partijen.php',
        table: '#partijen',
        fields: [
            {
                "label": "rv:",
                "name": "partijen.rv",
                type: "select2"
            },
            {
                "label": "titel:",
                "name": "partijen.titel"
            },
            {
                "label": "familienaam:",
                "name": "partijen.familienaam"
            },
            {
                "label": "vertegenwoordiger:",
                "name": "partijen.vertegenwoordiger"
            },
            {
                "label": "volet:",
                "name": "partijen.volet"
            },
            {
                "label": "vovoe:",
                "name": "partijen.vovoe"
            }
        ]
    } );

Since I use Bootstrap5 I am not able to use the search field in Select2
What am I doing wrong here?

Thanks.

Ficos

To initialise bootstrap5 and select2 I have used:

<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css'/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/jq-3.6.0/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.12.1/af-2.4.0/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/cr-1.5.6/date-1.1.2/fc-4.1.0/fh-3.2.3/kt-2.7.0/r-2.3.0/rg-1.2.0/rr-1.2.8/sc-2.0.6/sb-1.3.3/sp-2.0.1/sl-1.4.0/sr-1.1.1/datatables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css">
    
    
    <link rel="stylesheet" type="text/css" href="../css/generator-base.css">
    <link rel="stylesheet" type="text/css" href="../css/editor.bootstrap5.min.css">

 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/js/all.min.js" integrity="sha256-0vuk8LXoyrmCjp1f0O300qo1M75ZQyhH9X3J6d+scmk=" crossorigin="anonymous"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/bs5/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.11.5/af-2.3.7/b-2.2.2/b-colvis-2.2.2/b-html5-2.2.2/b-print-2.2.2/cr-1.5.5/date-1.1.2/fc-4.0.2/fh-3.2.2/kt-2.6.4/r-2.2.9/rg-1.1.4/rr-1.2.8/sc-2.0.5/sb-1.3.2/sp-2.0.0/sl-1.3.4/sr-1.1.0/datatables.min.js"></script>
    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js'></script>
        
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>    
    <script src="../assets/vendor/bootstrap-datepicker-master/dist/js/bootstrap-datepicker.min.js"></script>
    <script src="../assets/vendor/bootstrap-datepicker-master/dist/locales/bootstrap-datepicker.nl.min.js"></script>
    <script src="../assets/extensions/moment-with-locales.js"></script>
    <script src="../assets/extensions/datetime-moment.js"></script>

    <script type="text/javascript" charset="utf-8" src="../js/dataTables.editor.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../js/editor.bootstrap5.min.js"></script>

    <script src="https://cdn.datatables.net/plug-ins/1.11.3/dataRender/ellipsis.js"></script>
    <script src="../assets/extensions/editor.select2.js"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/classic/ckeditor.js"></script>
    <script src="../assets/extensions/editor.ckeditor5.js"></script>

Ficos

To initialise bootstrap5 and select2 I have used:

<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css'/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/jq-3.6.0/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.12.1/af-2.4.0/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/cr-1.5.6/date-1.1.2/fc-4.1.0/fh-3.2.3/kt-2.7.0/r-2.3.0/rg-1.2.0/rr-1.2.8/sc-2.0.6/sb-1.3.3/sp-2.0.1/sl-1.4.0/sr-1.1.1/datatables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css">
    
    
    <link rel="stylesheet" type="text/css" href="../css/generator-base.css">
    <link rel="stylesheet" type="text/css" href="../css/editor.bootstrap5.min.css">

 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/js/all.min.js" integrity="sha256-0vuk8LXoyrmCjp1f0O300qo1M75ZQyhH9X3J6d+scmk=" crossorigin="anonymous"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/bs5/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.11.5/af-2.3.7/b-2.2.2/b-colvis-2.2.2/b-html5-2.2.2/b-print-2.2.2/cr-1.5.5/date-1.1.2/fc-4.0.2/fh-3.2.2/kt-2.6.4/r-2.2.9/rg-1.1.4/rr-1.2.8/sc-2.0.5/sb-1.3.2/sp-2.0.0/sl-1.3.4/sr-1.1.0/datatables.min.js"></script>
    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js'></script>
        
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>    
    <script src="../assets/vendor/bootstrap-datepicker-master/dist/js/bootstrap-datepicker.min.js"></script>
    <script src="../assets/vendor/bootstrap-datepicker-master/dist/locales/bootstrap-datepicker.nl.min.js"></script>
    <script src="../assets/extensions/moment-with-locales.js"></script>
    <script src="../assets/extensions/datetime-moment.js"></script>

    <script type="text/javascript" charset="utf-8" src="../js/dataTables.editor.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../js/editor.bootstrap5.min.js"></script>

    <script src="https://cdn.datatables.net/plug-ins/1.11.3/dataRender/ellipsis.js"></script>
    <script src="../assets/extensions/editor.select2.js"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/classic/ckeditor.js"></script>
    <script src="../assets/extensions/editor.ckeditor5.js"></script>

carlop

It never worked.
Select2 works in a standard Bootstrap modal following this guide: https://select2.org/troubleshooting/common-problems
But it doesn't work in an Editor modal.
It seems a Css problem, but I never figured out how to fix it.

kthorngren

The select2 input seems to work with Editor in your example. I'm able to select and change the options. However the table displays the value not the label. This thread might help to display the label in the table.

Please provide the steps to recreate the problem in your test case.

Kevin

carlop

You're able to select and change the options, but if you click on the search field the focus goes to the close X button on the top right.
The actual workaround is to disable search field or switch to a different library, like Selectize or Choice.

kthorngren

May be you can use open or opened to execute this code:

    $('#mySelect2').select2({
        dropdownParent: $('#myModal')
    });

Kevin

Ficos

@carlop : Select2 worked perfectly under Bootstrap4, thanks for the suggestion I will switch to Selectize for Bootstrap5, that works as wanted.

Thanks all!
Jan

sasmit

I had the exact same issue and spent hours trying to fix. I was finally able to fix using @kthorngren suggestion (field would need to be explicitly given an id)

editor.on('open', function (e, mode, action) {
    $('#id').select2({
        dropdownParent: $('.modal')
    });
});

The only downside of using this direct method is that I had to do it for each filed that used select2. So I found a workaround on the plugin website and customized it further to make it work on all select2 instances

$('body').on('shown.bs.modal', '.modal', function () {
    $(this).find('select').each(function () {
        $(this).select2({
            dropdownParent: $('.modal')
        });
    });
});