All buttons are triggerd when opening bootstrap 4 modal

[wimurk]

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

[JavaTMP]

As a quick option, please try add the following option when initializing summernote plugin: dialogsInBody: true, like this:

$('.summernote').summernote({
            lang: 'nl-NL', // default: 'en-US'
            dialogsInBody: true
        });

[wimurk]

@JavaTMP Already tried, Doens't work

[wimurk]

It also happends when putting summernote into an accordion. Is there a fix yet?

[DennisSuitters]

Have you tried using Summernote Lite? Curious if it's a Bootstrap 4 issue or Summernote itself.

[wimurk]

@DiemenDesign just tried summernote lite and it works without problems. It surely is a bootstrap 4 problem

[JavaTMP]

Could you try using summernote v0.8.10 instead of v0.8.9 . because we already use summernote v0.8.10 inside a modal in Bootstrap 4 and it works correctly.

The following demo show you a summernote v0.8.10 inside a modal in Bootstrap 4.1.1 template: (Click on "Send New Messages" button) http://java.javatmp.com:8080/JavaTMP-Java-Ajax-Starter/#/JavaTMP-Java-Ajax-Starter/pages/home

[wimurk]

@JavaTMP Tried it with the new summernote v0.8.10 and still no luck.

Do you need any other information?

[DennisSuitters]

When including Bootstrap Javascript, have you also included the popper.js script?

[JavaTMP]

Stranger behavior, I could not provide help any more, But I suggest to create a simple demo with only required resources like jquery, bootstrap, popper, and summernote js/css files and then add your specific work to it and see if the issue arise again or not.

[juanhuerta]

@JavaTMP Did you get any solution for this behavior? I have the same issue using summernote v8.10 and bootstrap 4.

[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