search field Select2 seems not to work with Bootstrap5

search field Select2 seems not to work with Bootstrap5

FicosFicos Posts: 60Questions: 18Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • FicosFicos Posts: 60Questions: 18Answers: 0

    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>
    
  • FicosFicos Posts: 60Questions: 18Answers: 0

    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>
    
  • carlopcarlop Posts: 37Questions: 9Answers: 1

    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.

  • kthorngrenkthorngren Posts: 16,808Questions: 25Answers: 3,983

    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

  • carlopcarlop Posts: 37Questions: 9Answers: 1
    Answer ✓

    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.

  • kthorngrenkthorngren Posts: 16,808Questions: 25Answers: 3,983
    edited May 30

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

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

    Kevin

  • FicosFicos Posts: 60Questions: 18Answers: 0

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

    Thanks all!
    Jan

Sign In or Register to comment.