All buttons are triggerd when opening bootstrap 4 modal

When using summernote withing the bootstrap4 modals. All the dropdowns are triggered and can’t be closed when opening the modal. (see screenshots)

        $('.summernote').summernote({
            lang: 'nl-NL' // default: 'en-US'
        });
       $('#myModal').modal('show');

steps to reproduce

1. Put Textarea in modal and init
2. Open te modal using $(‘modal’).modal(‘show’);

browser version and os version and summernote version

Chrome Summernote v0.8.9 Bootstrap 4

screenshot of issue

Also in the event listener there is an click event on the buttons for closing and opening the modal

[juanhuerta]

Ok, I think I know where is the problem in my case. The HTML admin template I’m using (https://themeforest.net/item/infinio-bootstrap-4-admin-dashboard-template/21824011) has CSS dropdown rules that always shows the dd:

.show .dropdown-menu{display:block}

This seems to be ok, but when I use summernote inside a modal the “show” class is added to the modal div when opened, and that fires the “unhide” behavior, no matter if the drop button is selected. The way I fixed is to add custom css rules to force the expected behavior for summernote dropdowns inside modals:

` div.modal div.note-btn-group.btn-group div.dropdown-menu { display: none !important; }

div.modal div.note-btn-group.btn-group.show div.dropdown-menu { display: block !important; overflow-y: scroll; max-height: 250px; left: 0; } `

[wimurk]

@juanhuerta thanks, i also use a template with a lot of styling. I first thought it was my javascript that messed it up.

I fixed the issue by using the standalone version of summernote