Retrospring/app/javascript/retrospring/initializers/bootstrap.ts

import * as bootstrap from 'bootstrap';

/**
 * This module sets up Bootstrap's JavaScript
 *
 * Inside of the exported function below, initialize Bootstrap
 * modules that require explicit initilization, like tooltips
 */
export default function (): void {
  document.addEventListener('turbo:load', () => {
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

    const dropdownElementList = document.querySelectorAll('.dropdown-toggle');
    [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl));

    // HACK/BUG?: Bootstrap disables dropdowns in navbars, here we re-enable and "kinda" fix it
    // By the time Bootstrap 6 releases this probably won't be needed anymore
    const navigationElementList = document.querySelectorAll('#rs-mobile-nav .nav-link[data-bs-toggle="dropdown"]');
    [...navigationElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl, {
      popperConfig(defaultPopperConfig) {
        return {
          ...defaultPopperConfig,
          strategy: 'fixed',
          modifiers: [
            {
              name: 'applyStyles',
              enabled: true
            },
            {
              name: 'preventOverflow',
              options: {
                boundary: document.querySelector('body')
              }
            },
          ]
        }
      }
    }));
  });
}