Fixing Summernote Dropdown issue with Bootstrap 5

If you're integrating the Summernote editor with Bootstrap 5 and facing problems with the dropdown functionality within the editor, you've landed in the right spot. This tutorial will walk you through the steps to resolve this issue.

To resolve the dropdown issue in the Summernote editor with Bootstrap 5, avoid using the latest version of bootstrap.bundle.min.js; instead, opt for an older version (Bootstrap 4). Below is the CDN link for bootstrap.bundle.min.js that you can include in your blade file:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Here's the complete code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Summernote Editor with Laravel Example</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">

    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
    
    <!--Including bootstrap.min.css -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
     <!--Including summernote-bs5.min.css for bootstrap 5 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.css" integrity="sha512-ngQ4IGzHQ3s/Hh8kMyG4FC74wzitukRMIcTOoKT3EyzFZCILOPF0twiXOQn75eDINUfKBYmzYn2AA8DkAk8veQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    
    <style>
        /* Set the font size and font family of the Summernote editor */
        .note-editable {
            font-size: 17px !important;
            font-family: Arial, Verdana, Tahoma;
        }

        /** for code feature */
        pre {
            display: block;
            padding: 15px;
            margin-top: 10px;
            margin-bottom: 30px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #333333;
            word-break: normal;
            word-wrap: break-word;
            background-color: #f5f5f5;
            border: 1px solid #cccccc;
            border-radius: 4px;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div style="width:1000px; margin-top:50px; margin-left: auto; margin-right: auto; width: 60%;">
        <!--Adding summernote text editor-->
        <textarea type="text" name="description" data-name="description" id="editor"></textarea>
    </div>

    <!--Including bootstrap.min.js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
    <!--Including jquery required for summernote-->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <!--Summernote dropdown issue FIXED : including version 4.5.3 of bootstrap.bundle.min.js. Latest version will not work-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <!--Including summernote-bs5.min.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.js" integrity="sha512-6F1RVfnxCprKJmfulcxxym1Dar5FsT/V2jiEUvABiaEiFWoQ8yHvqRM/Slf0qJKiwin6IDQucjXuolCfCKnaJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <!--Initializing summernote-->
    <script>
        $(document).ready(function() {
            $('#editor').summernote({
                csrf: true,
                placeholder: 'Type description here...',
                tabsize: 100,
                height: 500,
                focus: true,
                codemirror: {
                    theme: 'monokai'
                },
                fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '24', '36', '48', '64'],
                toolbar: [
                    ['style', ['style']],
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video']],
                    ['view', ['fullscreen', 'codeview', 'help']],
                ],

            });
            $('.dropdown-toogle').dropdown(); //enabling menu dropdown in editor
        });
    </script>
</body>

</html>