Dropdown menus in toolbar not working with bootstrap 5

[hardik-kapadia]

The dropdowns in the toolbar of the the in place widget aren't working with Bootstrap 5. The issue is pretty straightforward, these buttons have an attribute called data-toggle which needs to be data-bs-toggle. Replacing it seems to be working.

Not working:

Working:

I have checked everything else, there's no double jquery import, the event listeners are being attached too. This is the only apparent problem

[iragm]

See https://github.com/summernote/summernote/pull/4604/

For now, add this code somewhere:

// Function to replace data-toggle with data-bs-toggle
function replaceDataToggle() {
    document.querySelectorAll('[data-toggle="dropdown"]').forEach(function(el) {
      el.setAttribute('data-bs-toggle', 'dropdown');
      el.removeAttribute('data-toggle');
    });
  }

  // Run on page load
  replaceDataToggle();

  // Observe for new elements added to the DOM
  const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.addedNodes.length > 0) {
        replaceDataToggle(); // Replace in newly added elements
      }
    });
  });

  // Observe the entire document body for changes
  observer.observe(document.body, { childList: true, subtree: true });

I ran collectstatic and then dumped it into the top of /static/summernote/summernote-bs5.min.js before all the minified js

[hardik-kapadia]

I have since switched from bs5 to Lite version but this wouldn't work as the summernote is being rendered after the page is loading and the function (A similar one I tried before) does not detect the element as the element is not yet present. Tried a couple of things like, after element loading, deferring js execution, etc. nothing worked.

[iragm]

The mutation observer I posted watches the document body so even stuff that's added later gets observed. It's working fine for me, maybe check the usual suspects like seeing if the js is actually firing and try with and without an iframe?