summernote: Bootstrap 5 toggle buttons not working

I’m trying to use summernote together with boostrap5. The problem is that all dropdown buttons in the summernote toolbar are not working.

Description of your Issue or Request:

Please provide a short description of the issue or request. If you don’t provide one (we require more information that just what the Title says), we can’t expedite helping to fix your issue or expedite your request, and your issue may simply get closed.

steps to reproduce (Add more if necessary):

you can reproduce the issue here in this JSFiddle

1 Press on the button for line height (or Font size)

Expected drop down should open

Actual nothing happens

Additional Info

in Bootsrap 5 the toggle state isn’t handle by the data-toggle="dropdown" anymore but, by data-bs-toggle="dropdown" (see https://getbootstrap.com/docs/5.0/migration/#javascript second bulletpoint)

What is your Operating System, Browser and Version and Summernote Version you are using:

This can help find and resolve any issues, place an x inside the brackets or if relevant elaborate after each choice.

Operating System: [ X ] Microsoft Windows [ ] Apple [ ] Linux [ ] All
Browser and Version: [ ] Brave [ X ] Chrome [ ] Edge [ X ] Firefox [ ] Internet Explorer [ ] Opera [ ] Safari [ ] Other (Specify):
Summernote Version, place an x inside the brackets: [ ] BS3 [ ] BS4 [ X ] BS5 [ ] Lite [ ] All

If you can make the issue using jsfiddle(https://jsfiddle.net/), We can save time to reproduce the problem.

About this issue

Original URL
State: closed
Created a year ago
Reactions: 2
Comments: 19 (8 by maintainers)

Commits related to this issue

move to summernote lite because of https://github.com/summernote/summernote/issues/4464 — committed to Lan2Play/eventula-manager by Apfelwurm 8 months ago

Most upvoted comments

Hallo I just checked out this repository and create an own build of it and found out, that the issue here has already been resolved, but not on the released version ( 0.8.21). could someone just release a new versio 0.8.21 of the current state?

For anyone who is interested and finds this issue the fix is in the file https://github.com/summernote/summernote/blob/develop/src/styles/bs5/summernote-bs5.js lines if (options && options.data && options.data.toggle === 'dropdown') { $node.removeAttr('data-toggle'); $node.attr('data-bs-toggle', 'dropdown');

MichaelJakubec on Apr 28, 2023

I’m waiting to hear back, it’s been suggested that perhaps we look at going straight to a v0.9 release, but I would like to see more of the bug issues resolved that are listed in the Projects that adversely affect operation/usage. I would also prefer to drop bootstrap, which will allow Summernote to work with more Styling Frameworks, and not rely on external styling to operate. I’d also like to see more of jQuery dependence removed as well. As for time, at the moment, I can’t give an ETA as that’s not been discussed. I’m hoping soon though.

DiemenDesign on Jul 19, 2023

I use the CDN link https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.js

Here is my workaround:

setTimeout(function() {
    var elements = document.querySelectorAll('[data-toggle="dropdown"]')
    elements.forEach(function(element) {
        element.setAttribute('data-bs-toggle', 'dropdown')
        element.setAttribute('data-bs-auto-close', 'outside')
        element.removeAttribute('data-toggle')
        $(element.nextElementSibling).on('click', function(e){
            element.click()
        })
    })
}, 1000)

play323251 on Dec 4, 2023

I already have Bootstrap and jQuery in that particular context, so that wouldn’t be a problem for me. I haven’t been able to get the BS5 example to work, either. And even though I’ve built BS5 locally with yarn, the files in the distribution didn’t work at all for me – only the ones in the CDN. Regardless of whether I’ve left them as they came, or added the infamous missing -bs for toggles. Also, pressing the download button one gets an older release (0.8.18), that doesn’t include -bs5. files at all… I’ll give the Lite version a go… thanks for the tip.

alxx on Oct 20, 2023

Actually, you’d be surprised, a lot are more likely to use the Lite version, as it works with any other framework. I’m more of an advocate for dropping Bootstrap completely, and ideally also jQuery.

DiemenDesign on Oct 20, 2023

@DiemenDesign any news on this? we are also currently updating from bootstrap 3 to 5 and are waiting for the fixes

oanacapatana on Jul 19, 2023

All good, and yes, I’ve been asking the other devs about the v0.8.20 release.

DiemenDesign on Jul 6, 2023