release: 7.3.2

README.txt

@@ -1,5 +1,5 @@
 MDB5
-Version: FREE 7.3.1
+Version: FREE 7.3.2
 
 Documentation:
 https://mdbootstrap.com/docs/standard/

css/mdb.dark.min.css

@@ -1,6 +1,6 @@
 /*!
 * MDB5
-* Version: FREE 7.3.1
+* Version: FREE 7.3.2
 *
 *
 * Copyright: Material Design for Bootstrap

css/mdb.dark.rtl.min.css

@@ -1,6 +1,6 @@
 /*!
 * MDB5
-* Version: FREE 7.3.1
+* Version: FREE 7.3.2
 *
 *
 * Copyright: Material Design for Bootstrap

css/mdb.min.css

@@ -1,6 +1,6 @@
 /*!
 * MDB5
-* Version: FREE 7.3.1
+* Version: FREE 7.3.2
 *
 *
 * Copyright: Material Design for Bootstrap

css/mdb.rtl.min.css

@@ -1,6 +1,6 @@
 /*!
 * MDB5
-* Version: FREE 7.3.1
+* Version: FREE 7.3.2
 *
 *
 * Copyright: Material Design for Bootstrap

js/mdb.es.min.js

@@ -7340,9 +7340,13 @@ class Range extends BaseComponent2 {
     });
   }
 }
+const callbackInitState = /* @__PURE__ */ new Map();
 const alertCallback = (component, initSelector) => {
   const Alert3 = component;
-  enableDismissTrigger(Alert3, "close");
+  if (!callbackInitState.has(component.name)) {
+    enableDismissTrigger(Alert3);
+    callbackInitState.set(component.name, true);
+  }
   SelectorEngine$1.find(initSelector).forEach((element2) => {
     return Alert3.getOrCreateInstance(element2);
   });
@@ -7350,17 +7354,23 @@ const alertCallback = (component, initSelector) => {
 const buttonCallback = (component, initSelector) => {
   const Button3 = component;
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
-  EventHandler$1.on(document, EVENT_CLICK_DATA_API, initSelector, (event) => {
+  if (!callbackInitState.has(component.name)) {
-    event.preventDefault();
+    EventHandler$1.on(document, EVENT_CLICK_DATA_API, initSelector, (event) => {
-    const button = event.target.closest(initSelector);
+      event.preventDefault();
-    const data = Button3.getOrCreateInstance(button);
+      const button = event.target.closest(initSelector);
-    data.toggle();
+      const data = Button3.getOrCreateInstance(button);
-  });
+      data.toggle();
+    });
+    callbackInitState.set(component.name, true);
+  }
   SelectorEngine$1.find(initSelector).forEach((element2) => {
     return Button3.getOrCreateInstance(element2);
   });
 };
 const carouselCallback = (component, initSelector) => {
+  if (callbackInitState.has(component.name)) {
+    return;
+  }
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
   const SELECTOR_DATA_SLIDE = "[data-mdb-slide], [data-mdb-slide-to]";
   const CLASS_NAME_CAROUSEL2 = "carousel";
@@ -7394,21 +7404,25 @@ const carouselCallback = (component, initSelector) => {
       Carousel3.getOrCreateInstance(carousel);
     });
   });
+  callbackInitState.set(component.name, true);
 };
 const collapseCallback = (component, initSelector) => {
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
   const SELECTOR_DATA_TOGGLE2 = initSelector;
   const Collapse3 = component;
-  EventHandler$1.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE2, function(event) {
+  if (!callbackInitState.has(component.name)) {
-    if (event.target.tagName === "A" || event.delegateTarget && event.delegateTarget.tagName === "A") {
+    EventHandler$1.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE2, function(event) {
-      event.preventDefault();
+      if (event.target.tagName === "A" || event.delegateTarget && event.delegateTarget.tagName === "A") {
-    }
+        event.preventDefault();
-    const selector = getSelectorFromElement(this);
+      }
-    const selectorElements = SelectorEngine$1.find(selector);
+      const selector = getSelectorFromElement(this);
-    selectorElements.forEach((element2) => {
+      const selectorElements = SelectorEngine$1.find(selector);
-      Collapse3.getOrCreateInstance(element2, { toggle: false }).toggle();
+      selectorElements.forEach((element2) => {
+        Collapse3.getOrCreateInstance(element2, { toggle: false }).toggle();
+      });
     });
-  });
+    callbackInitState.set(component.name, true);
+  }
   SelectorEngine$1.find(SELECTOR_DATA_TOGGLE2).forEach((el) => {
     const selector = getSelectorFromElement(el);
     const selectorElements = SelectorEngine$1.find(selector);
@@ -7424,19 +7438,27 @@ const dropdownCallback = (component, initSelector) => {
   const SELECTOR_MENU2 = ".dropdown-menu";
   const SELECTOR_DATA_TOGGLE2 = `[data-mdb-${component.NAME}-initialized]`;
   const Dropdown3 = component;
-  EventHandler$1.on(
+  if (!callbackInitState.has(component.name)) {
-    document,
+    EventHandler$1.on(
-    EVENT_KEYDOWN_DATA_API,
+      document,
-    SELECTOR_DATA_TOGGLE2,
+      EVENT_KEYDOWN_DATA_API,
-    Dropdown3.dataApiKeydownHandler
+      SELECTOR_DATA_TOGGLE2,
-  );
+      Dropdown3.dataApiKeydownHandler
-  EventHandler$1.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_MENU2, Dropdown3.dataApiKeydownHandler);
+    );
-  EventHandler$1.on(document, EVENT_CLICK_DATA_API, Dropdown3.clearMenus);
+    EventHandler$1.on(
-  EventHandler$1.on(document, EVENT_KEYUP_DATA_API, Dropdown3.clearMenus);
+      document,
-  EventHandler$1.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE2, function(event) {
+      EVENT_KEYDOWN_DATA_API,
-    event.preventDefault();
+      SELECTOR_MENU2,
-    Dropdown3.getOrCreateInstance(this).toggle();
+      Dropdown3.dataApiKeydownHandler
-  });
+    );
+    EventHandler$1.on(document, EVENT_CLICK_DATA_API, Dropdown3.clearMenus);
+    EventHandler$1.on(document, EVENT_KEYUP_DATA_API, Dropdown3.clearMenus);
+    EventHandler$1.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE2, function(event) {
+      event.preventDefault();
+      Dropdown3.getOrCreateInstance(this).toggle();
+    });
+  }
+  callbackInitState.set(component.name, true);
   SelectorEngine$1.find(initSelector).forEach((el) => {
     Dropdown3.getOrCreateInstance(el);
   });
@@ -7446,31 +7468,56 @@ const inputCallback = (component, initSelector) => {
   const SELECTOR_OUTLINE_INPUT = `${SELECTOR_DATA_INIT} input`;
   const SELECTOR_OUTLINE_TEXTAREA = `${SELECTOR_DATA_INIT} textarea`;
   const Input2 = component;
-  EventHandler$1.on(document, "focus", SELECTOR_OUTLINE_INPUT, Input2.activate(new Input2()));
+  if (!callbackInitState.has(component.name)) {
-  EventHandler$1.on(document, "input", SELECTOR_OUTLINE_INPUT, Input2.activate(new Input2()));
+    EventHandler$1.on(document, "focus", SELECTOR_OUTLINE_INPUT, Input2.activate(new Input2()));
-  EventHandler$1.on(document, "blur", SELECTOR_OUTLINE_INPUT, Input2.deactivate(new Input2()));
+    EventHandler$1.on(document, "input", SELECTOR_OUTLINE_INPUT, Input2.activate(new Input2()));
-  EventHandler$1.on(document, "focus", SELECTOR_OUTLINE_TEXTAREA, Input2.activate(new Input2()));
+    EventHandler$1.on(document, "blur", SELECTOR_OUTLINE_INPUT, Input2.deactivate(new Input2()));
-  EventHandler$1.on(document, "input", SELECTOR_OUTLINE_TEXTAREA, Input2.activate(new Input2()));
+    EventHandler$1.on(document, "focus", SELECTOR_OUTLINE_TEXTAREA, Input2.activate(new Input2()));
-  EventHandler$1.on(document, "blur", SELECTOR_OUTLINE_TEXTAREA, Input2.deactivate(new Input2()));
+    EventHandler$1.on(document, "input", SELECTOR_OUTLINE_TEXTAREA, Input2.activate(new Input2()));
-  EventHandler$1.on(window, "shown.bs.modal", (e) => {
+    EventHandler$1.on(document, "blur", SELECTOR_OUTLINE_TEXTAREA, Input2.deactivate(new Input2()));
-    SelectorEngine$1.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element2) => {
+    EventHandler$1.on(window, "shown.bs.modal", (e) => {
-      const instance = Input2.getInstance(element2.parentNode);
+      SelectorEngine$1.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element2) => {
-      if (!instance) {
+        const instance = Input2.getInstance(element2.parentNode);
-        return;
+        if (!instance) {
-      }
+          return;
-      instance.update();
+        }
+        instance.update();
+      });
+      SelectorEngine$1.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach((element2) => {
+        const instance = Input2.getInstance(element2.parentNode);
+        if (!instance) {
+          return;
+        }
+        instance.update();
+      });
     });
-    SelectorEngine$1.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach((element2) => {
+    EventHandler$1.on(window, "shown.bs.dropdown", (e) => {
-      const instance = Input2.getInstance(element2.parentNode);
+      const target = e.target.parentNode.querySelector(".dropdown-menu");
-      if (!instance) {
+      if (target) {
-        return;
+        SelectorEngine$1.find(SELECTOR_OUTLINE_INPUT, target).forEach((element2) => {
+          const instance = Input2.getInstance(element2.parentNode);
+          if (!instance) {
+            return;
+          }
+          instance.update();
+        });
+        SelectorEngine$1.find(SELECTOR_OUTLINE_TEXTAREA, target).forEach((element2) => {
+          const instance = Input2.getInstance(element2.parentNode);
+          if (!instance) {
+            return;
+          }
+          instance.update();
+        });
       }
-      instance.update();
     });
-  });
+    EventHandler$1.on(window, "shown.bs.tab", (e) => {
-  EventHandler$1.on(window, "shown.bs.dropdown", (e) => {
+      let targetId;
-    const target = e.target.parentNode.querySelector(".dropdown-menu");
+      if (e.target.href) {
-    if (target) {
+        targetId = e.target.href.split("#")[1];
+      } else {
+        targetId = Manipulator$1.getDataAttribute(e.target, "target").split("#")[1];
+      }
+      const target = SelectorEngine$1.findOne(`#${targetId}`);
       SelectorEngine$1.find(SELECTOR_OUTLINE_INPUT, target).forEach((element2) => {
         const instance = Input2.getInstance(element2.parentNode);
         if (!instance) {
@@ -7485,55 +7532,33 @@ const inputCallback = (component, initSelector) => {
         }
         instance.update();
       });
-    }
+    });
-  });
+    EventHandler$1.on(window, "reset", (e) => {
-  EventHandler$1.on(window, "shown.bs.tab", (e) => {
+      SelectorEngine$1.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element2) => {
-    let targetId;
+        const instance = Input2.getInstance(element2.parentNode);
-    if (e.target.href) {
+        if (!instance) {
-      targetId = e.target.href.split("#")[1];
+          return;
-    } else {
+        }
-      targetId = Manipulator$1.getDataAttribute(e.target, "target").split("#")[1];
+        instance.forceInactive();
-    }
+      });
-    const target = SelectorEngine$1.findOne(`#${targetId}`);
+      SelectorEngine$1.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach((element2) => {
-    SelectorEngine$1.find(SELECTOR_OUTLINE_INPUT, target).forEach((element2) => {
+        const instance = Input2.getInstance(element2.parentNode);
-      const instance = Input2.getInstance(element2.parentNode);
+        if (!instance) {
-      if (!instance) {
+          return;
+        }
+        instance.forceInactive();
+      });
+    });
+    EventHandler$1.on(window, "onautocomplete", (e) => {
+      const instance = Input2.getInstance(e.target.parentNode);
+      if (!instance || !e.cancelable) {
         return;
       }
-      instance.update();
+      instance.forceActive();
     });
-    SelectorEngine$1.find(SELECTOR_OUTLINE_TEXTAREA, target).forEach((element2) => {
+    callbackInitState.set(component.name, true);
-      const instance = Input2.getInstance(element2.parentNode);
+  }
-      if (!instance) {
-        return;
-      }
-      instance.update();
-    });
-  });
   SelectorEngine$1.find(SELECTOR_DATA_INIT).map((element2) => Input2.getOrCreateInstance(element2));
-  EventHandler$1.on(window, "reset", (e) => {
-    SelectorEngine$1.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element2) => {
-      const instance = Input2.getInstance(element2.parentNode);
-      if (!instance) {
-        return;
-      }
-      instance.forceInactive();
-    });
-    SelectorEngine$1.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach((element2) => {
-      const instance = Input2.getInstance(element2.parentNode);
-      if (!instance) {
-        return;
-      }
-      instance.forceInactive();
-    });
-  });
-  EventHandler$1.on(window, "onautocomplete", (e) => {
-    const instance = Input2.getInstance(e.target.parentNode);
-    if (!instance || !e.cancelable) {
-      return;
-    }
-    instance.forceActive();
-  });
 };
 const modalCallback = (component, initSelector) => {
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
@@ -7541,31 +7566,34 @@ const modalCallback = (component, initSelector) => {
   const Modal3 = component;
   const EVENT_SHOW2 = `show.bs.${component.name}`;
   const EVENT_HIDDEN2 = `hidden.bs.${component.name}`;
-  EventHandler$1.on(document, EVENT_CLICK_DATA_API, initSelector, function(event) {
+  if (!callbackInitState.has(component.name)) {
-    const target = getElementFromSelector(this);
+    EventHandler$1.on(document, EVENT_CLICK_DATA_API, initSelector, function(event) {
-    if (["A", "AREA"].includes(this.tagName)) {
+      const target = getElementFromSelector(this);
-      event.preventDefault();
+      if (["A", "AREA"].includes(this.tagName)) {
-    }
+        event.preventDefault();
-    EventHandler$1.one(target, EVENT_SHOW2, (showEvent) => {
-      if (showEvent.defaultPrevented) {
-        return;
       }
-      EventHandler$1.one(target, EVENT_HIDDEN2, () => {
+      EventHandler$1.one(target, EVENT_SHOW2, (showEvent) => {
-        if (isVisible$1(this)) {
+        if (showEvent.defaultPrevented) {
-          this.focus();
+          return;
+        }
+        EventHandler$1.one(target, EVENT_HIDDEN2, () => {
+          if (isVisible$1(this)) {
+            this.focus();
+          }
+        });
+      });
+      const alreadyOpenedModals = SelectorEngine$1.find(OPEN_SELECTOR);
+      alreadyOpenedModals.forEach((modal) => {
+        if (!modal.classList.contains("modal-non-invasive-show")) {
+          Modal3.getInstance(modal).hide();
         }
       });
+      const data = Modal3.getOrCreateInstance(target);
+      data.toggle(this);
     });
-    const alreadyOpenedModals = SelectorEngine$1.find(OPEN_SELECTOR);
+    enableDismissTrigger(Modal3);
-    alreadyOpenedModals.forEach((modal) => {
+    callbackInitState.set(component.name, true);
-      if (!modal.classList.contains("modal-non-invasive-show")) {
+  }
-        Modal3.getInstance(modal).hide();
-      }
-    });
-    const data = Modal3.getOrCreateInstance(target);
-    data.toggle(this);
-  });
-  enableDismissTrigger(Modal3);
   SelectorEngine$1.find(initSelector).forEach((el) => {
     const selector = getSelectorFromElement(el);
     const selectorElement = SelectorEngine$1.findOne(selector);
@@ -7573,6 +7601,9 @@ const modalCallback = (component, initSelector) => {
   });
 };
 const offcanvasCallback = (component, initSelector) => {
+  if (callbackInitState.has(component.name)) {
+    return;
+  }
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
   const OPEN_SELECTOR = ".offcanvas.show";
   const Offcanvas2 = component;
@@ -7612,8 +7643,12 @@ const offcanvasCallback = (component, initSelector) => {
     });
   });
   enableDismissTrigger(Offcanvas2);
+  callbackInitState.set(component.name, true);
 };
 const scrollspyCallback = (component, initSelector) => {
+  if (callbackInitState.has(component.name)) {
+    return;
+  }
   const EVENT_LOAD_DATA_API = `load.bs.${component.name}.data-api`;
   const ScrollSpy3 = component;
   EventHandler$1.on(window, EVENT_LOAD_DATA_API, () => {
@@ -7621,6 +7656,7 @@ const scrollspyCallback = (component, initSelector) => {
       ScrollSpy3.getOrCreateInstance(el);
     });
   });
+  callbackInitState.set(component.name, true);
 };
 const tabCallback = (component, initSelector) => {
   const EVENT_LOAD_DATA_API = `load.bs.${component.name}.data-api`;
@@ -7628,31 +7664,40 @@ const tabCallback = (component, initSelector) => {
   const CLASS_NAME_ACTIVE2 = "active";
   const SELECTOR_DATA_TOGGLE_ACTIVE = `.${CLASS_NAME_ACTIVE2}[data-mdb-tab-init], .${CLASS_NAME_ACTIVE2}[data-mdb-pill-init], .${CLASS_NAME_ACTIVE2}[data-mdb-toggle="list"]`;
   const Tab3 = component;
-  EventHandler$1.on(document, EVENT_CLICK_DATA_API, initSelector, function(event) {
+  if (!callbackInitState.has(component.name)) {
-    if (["A", "AREA"].includes(this.tagName)) {
+    EventHandler$1.on(document, EVENT_CLICK_DATA_API, initSelector, function(event) {
-      event.preventDefault();
+      if (["A", "AREA"].includes(this.tagName)) {
-    }
+        event.preventDefault();
-    if (isDisabled$1(this)) {
+      }
-      return;
+      if (isDisabled$1(this)) {
-    }
+        return;
-    Tab3.getOrCreateInstance(this).show();
+      }
-  });
+      Tab3.getOrCreateInstance(this).show();
-  EventHandler$1.on(window, EVENT_LOAD_DATA_API, () => {
-    SelectorEngine$1.find(SELECTOR_DATA_TOGGLE_ACTIVE).forEach((element2) => {
-      Tab3.getOrCreateInstance(element2);
     });
-  });
+    EventHandler$1.on(window, EVENT_LOAD_DATA_API, () => {
+      SelectorEngine$1.find(SELECTOR_DATA_TOGGLE_ACTIVE).forEach((element2) => {
+        Tab3.getOrCreateInstance(element2);
+      });
+    });
+    callbackInitState.set(component.name, true);
+  }
 };
 const toastCallback = (component, initSelector) => {
   const Toast3 = component;
-  enableDismissTrigger(Toast3);
+  if (!callbackInitState.has(component.name)) {
+    enableDismissTrigger(Toast3);
+    callbackInitState.set(component.name, true);
+  }
   SelectorEngine$1.find(initSelector).forEach((element2) => {
     return Toast3.getOrCreateInstance(element2);
   });
 };
 const rippleCallback = (component, initSelector) => {
   const Ripple2 = component;
-  EventHandler$1.one(document, "mousedown", initSelector, Ripple2.autoInitial(new Ripple2()));
+  if (!callbackInitState.has(component.name)) {
+    EventHandler$1.one(document, "mousedown", initSelector, Ripple2.autoInitial(new Ripple2()));
+    callbackInitState.set(component.name, true);
+  }
 };
 const defaultInitSelectors = {
   // Bootstrap Components

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-ui-kit",
-  "version": "7.3.1",
+  "version": "7.3.2",
   "type": "module",
   "main": "./js/mdb.umd.min.js",
   "module": "./js/mdb.es.min.js",

src/js/autoinit/callbacks/free.js

@@ -9,10 +9,15 @@ import {
 } from '../../mdb/util';
 import { enableDismissTrigger } from '../../bootstrap/mdb-prefix/util/component-functions';
 
+const callbackInitState = new Map();
+
 const alertCallback = (component, initSelector) => {
   const Alert = component;
 
-  enableDismissTrigger(Alert, 'close');
+  if (!callbackInitState.has(component.name)) {
+    enableDismissTrigger(Alert);
+    callbackInitState.set(component.name, true);
+  }
 
   // MDB init
   SelectorEngine.find(initSelector).forEach((element) => {
@@ -24,15 +29,18 @@ const buttonCallback = (component, initSelector) => {
   const Button = component;
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
 
-  // BS init
+  if (!callbackInitState.has(component.name)) {
-  EventHandler.on(document, EVENT_CLICK_DATA_API, initSelector, (event) => {
+    // BS init
-    event.preventDefault();
+    EventHandler.on(document, EVENT_CLICK_DATA_API, initSelector, (event) => {
+      event.preventDefault();
 
-    const button = event.target.closest(initSelector);
+      const button = event.target.closest(initSelector);
-    const data = Button.getOrCreateInstance(button);
+      const data = Button.getOrCreateInstance(button);
 
-    data.toggle();
+      data.toggle();
-  });
+    });
+    callbackInitState.set(component.name, true);
+  }
 
   // MDB init
   SelectorEngine.find(initSelector).forEach((element) => {
@@ -41,6 +49,10 @@ const buttonCallback = (component, initSelector) => {
 };
 
 const carouselCallback = (component, initSelector) => {
+  if (callbackInitState.has(component.name)) {
+    return;
+  }
+
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
   const SELECTOR_DATA_SLIDE = '[data-mdb-slide], [data-mdb-slide-to]';
   const CLASS_NAME_CAROUSEL = 'carousel';
@@ -83,6 +95,8 @@ const carouselCallback = (component, initSelector) => {
       Carousel.getOrCreateInstance(carousel);
     });
   });
+
+  callbackInitState.set(component.name, true);
 };
 
 const collapseCallback = (component, initSelector) => {
@@ -90,22 +104,26 @@ const collapseCallback = (component, initSelector) => {
   const SELECTOR_DATA_TOGGLE = initSelector;
   const Collapse = component;
 
-  EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+  if (!callbackInitState.has(component.name)) {
-    // preventDefault only for <a> elements (which change the URL) not inside the collapsible element
+    EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
-    if (
+      // preventDefault only for <a> elements (which change the URL) not inside the collapsible element
-      event.target.tagName === 'A' ||
+      if (
-      (event.delegateTarget && event.delegateTarget.tagName === 'A')
+        event.target.tagName === 'A' ||
-    ) {
+        (event.delegateTarget && event.delegateTarget.tagName === 'A')
-      event.preventDefault();
+      ) {
-    }
+        event.preventDefault();
+      }
 
-    const selector = getSelectorFromElement(this);
+      const selector = getSelectorFromElement(this);
-    const selectorElements = SelectorEngine.find(selector);
+      const selectorElements = SelectorEngine.find(selector);
 
-    selectorElements.forEach((element) => {
+      selectorElements.forEach((element) => {
-      Collapse.getOrCreateInstance(element, { toggle: false }).toggle();
+        Collapse.getOrCreateInstance(element, { toggle: false }).toggle();
+      });
     });
-  });
+
+    callbackInitState.set(component.name, true);
+  }
 
   SelectorEngine.find(SELECTOR_DATA_TOGGLE).forEach((el) => {
     const selector = getSelectorFromElement(el);
@@ -125,19 +143,28 @@ const dropdownCallback = (component, initSelector) => {
   const SELECTOR_DATA_TOGGLE = `[data-mdb-${component.NAME}-initialized]`;
   const Dropdown = component;
 
-  EventHandler.on(
+  if (!callbackInitState.has(component.name)) {
-    document,
+    EventHandler.on(
-    EVENT_KEYDOWN_DATA_API,
+      document,
-    SELECTOR_DATA_TOGGLE,
+      EVENT_KEYDOWN_DATA_API,
-    Dropdown.dataApiKeydownHandler
+      SELECTOR_DATA_TOGGLE,
-  );
+      Dropdown.dataApiKeydownHandler
-  EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_MENU, Dropdown.dataApiKeydownHandler);
+    );
-  EventHandler.on(document, EVENT_CLICK_DATA_API, Dropdown.clearMenus);
+    EventHandler.on(
-  EventHandler.on(document, EVENT_KEYUP_DATA_API, Dropdown.clearMenus);
+      document,
-  EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+      EVENT_KEYDOWN_DATA_API,
-    event.preventDefault();
+      SELECTOR_MENU,
-    Dropdown.getOrCreateInstance(this).toggle();
+      Dropdown.dataApiKeydownHandler
-  });
+    );
+    EventHandler.on(document, EVENT_CLICK_DATA_API, Dropdown.clearMenus);
+    EventHandler.on(document, EVENT_KEYUP_DATA_API, Dropdown.clearMenus);
+    EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+      event.preventDefault();
+      Dropdown.getOrCreateInstance(this).toggle();
+    });
+  }
+
+  callbackInitState.set(component.name, true);
 
   SelectorEngine.find(initSelector).forEach((el) => {
     Dropdown.getOrCreateInstance(el);
@@ -150,34 +177,62 @@ const inputCallback = (component, initSelector) => {
   const SELECTOR_OUTLINE_TEXTAREA = `${SELECTOR_DATA_INIT} textarea`;
   const Input = component;
 
-  EventHandler.on(document, 'focus', SELECTOR_OUTLINE_INPUT, Input.activate(new Input()));
+  if (!callbackInitState.has(component.name)) {
-  EventHandler.on(document, 'input', SELECTOR_OUTLINE_INPUT, Input.activate(new Input()));
+    EventHandler.on(document, 'focus', SELECTOR_OUTLINE_INPUT, Input.activate(new Input()));
-  EventHandler.on(document, 'blur', SELECTOR_OUTLINE_INPUT, Input.deactivate(new Input()));
+    EventHandler.on(document, 'input', SELECTOR_OUTLINE_INPUT, Input.activate(new Input()));
+    EventHandler.on(document, 'blur', SELECTOR_OUTLINE_INPUT, Input.deactivate(new Input()));
 
-  EventHandler.on(document, 'focus', SELECTOR_OUTLINE_TEXTAREA, Input.activate(new Input()));
+    EventHandler.on(document, 'focus', SELECTOR_OUTLINE_TEXTAREA, Input.activate(new Input()));
-  EventHandler.on(document, 'input', SELECTOR_OUTLINE_TEXTAREA, Input.activate(new Input()));
+    EventHandler.on(document, 'input', SELECTOR_OUTLINE_TEXTAREA, Input.activate(new Input()));
-  EventHandler.on(document, 'blur', SELECTOR_OUTLINE_TEXTAREA, Input.deactivate(new Input()));
+    EventHandler.on(document, 'blur', SELECTOR_OUTLINE_TEXTAREA, Input.deactivate(new Input()));
 
-  EventHandler.on(window, 'shown.bs.modal', (e) => {
+    EventHandler.on(window, 'shown.bs.modal', (e) => {
-    SelectorEngine.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element) => {
+      SelectorEngine.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element) => {
-      const instance = Input.getInstance(element.parentNode);
+        const instance = Input.getInstance(element.parentNode);
-      if (!instance) {
+        if (!instance) {
-        return;
+          return;
-      }
+        }
-      instance.update();
+        instance.update();
+      });
+      SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach((element) => {
+        const instance = Input.getInstance(element.parentNode);
+        if (!instance) {
+          return;
+        }
+        instance.update();
+      });
     });
-    SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach((element) => {
-      const instance = Input.getInstance(element.parentNode);
-      if (!instance) {
-        return;
-      }
-      instance.update();
-    });
-  });
 
-  EventHandler.on(window, 'shown.bs.dropdown', (e) => {
+    EventHandler.on(window, 'shown.bs.dropdown', (e) => {
-    const target = e.target.parentNode.querySelector('.dropdown-menu');
+      const target = e.target.parentNode.querySelector('.dropdown-menu');
-    if (target) {
+      if (target) {
+        SelectorEngine.find(SELECTOR_OUTLINE_INPUT, target).forEach((element) => {
+          const instance = Input.getInstance(element.parentNode);
+          if (!instance) {
+            return;
+          }
+          instance.update();
+        });
+        SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, target).forEach((element) => {
+          const instance = Input.getInstance(element.parentNode);
+          if (!instance) {
+            return;
+          }
+          instance.update();
+        });
+      }
+    });
+
+    EventHandler.on(window, 'shown.bs.tab', (e) => {
+      let targetId;
+
+      if (e.target.href) {
+        targetId = e.target.href.split('#')[1];
+      } else {
+        targetId = Manipulator.getDataAttribute(e.target, 'target').split('#')[1];
+      }
+
+      const target = SelectorEngine.findOne(`#${targetId}`);
       SelectorEngine.find(SELECTOR_OUTLINE_INPUT, target).forEach((element) => {
         const instance = Input.getInstance(element.parentNode);
         if (!instance) {
@@ -192,64 +247,40 @@ const inputCallback = (component, initSelector) => {
         }
         instance.update();
       });
-    }
+    });
-  });
 
-  EventHandler.on(window, 'shown.bs.tab', (e) => {
+    // form reset handler
-    let targetId;
+    EventHandler.on(window, 'reset', (e) => {
+      SelectorEngine.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element) => {
+        const instance = Input.getInstance(element.parentNode);
+        if (!instance) {
+          return;
+        }
+        instance.forceInactive();
+      });
+      SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach((element) => {
+        const instance = Input.getInstance(element.parentNode);
+        if (!instance) {
+          return;
+        }
+        instance.forceInactive();
+      });
+    });
 
-    if (e.target.href) {
+    // auto-fill
-      targetId = e.target.href.split('#')[1];
+    EventHandler.on(window, 'onautocomplete', (e) => {
-    } else {
+      const instance = Input.getInstance(e.target.parentNode);
-      targetId = Manipulator.getDataAttribute(e.target, 'target').split('#')[1];
+      if (!instance || !e.cancelable) {
-    }
-
-    const target = SelectorEngine.findOne(`#${targetId}`);
-    SelectorEngine.find(SELECTOR_OUTLINE_INPUT, target).forEach((element) => {
-      const instance = Input.getInstance(element.parentNode);
-      if (!instance) {
         return;
       }
-      instance.update();
+      instance.forceActive();
     });
-    SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, target).forEach((element) => {
+
-      const instance = Input.getInstance(element.parentNode);
+    callbackInitState.set(component.name, true);
-      if (!instance) {
+  }
-        return;
-      }
-      instance.update();
-    });
-  });
 
   // auto-init
   SelectorEngine.find(SELECTOR_DATA_INIT).map((element) => Input.getOrCreateInstance(element));
-
-  // form reset handler
-  EventHandler.on(window, 'reset', (e) => {
-    SelectorEngine.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element) => {
-      const instance = Input.getInstance(element.parentNode);
-      if (!instance) {
-        return;
-      }
-      instance.forceInactive();
-    });
-    SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach((element) => {
-      const instance = Input.getInstance(element.parentNode);
-      if (!instance) {
-        return;
-      }
-      instance.forceInactive();
-    });
-  });
-
-  // auto-fill
-  EventHandler.on(window, 'onautocomplete', (e) => {
-    const instance = Input.getInstance(e.target.parentNode);
-    if (!instance || !e.cancelable) {
-      return;
-    }
-    instance.forceActive();
-  });
 };
 
 const modalCallback = (component, initSelector) => {
@@ -259,40 +290,43 @@ const modalCallback = (component, initSelector) => {
   const EVENT_SHOW = `show.bs.${component.name}`;
   const EVENT_HIDDEN = `hidden.bs.${component.name}`;
 
-  EventHandler.on(document, EVENT_CLICK_DATA_API, initSelector, function (event) {
+  if (!callbackInitState.has(component.name)) {
-    const target = getElementFromSelector(this);
+    EventHandler.on(document, EVENT_CLICK_DATA_API, initSelector, function (event) {
+      const target = getElementFromSelector(this);
 
-    if (['A', 'AREA'].includes(this.tagName)) {
+      if (['A', 'AREA'].includes(this.tagName)) {
-      event.preventDefault();
+        event.preventDefault();
-    }
-
-    EventHandler.one(target, EVENT_SHOW, (showEvent) => {
-      if (showEvent.defaultPrevented) {
-        // only register focus restorer if modal will actually get shown
-        return;
       }
 
-      EventHandler.one(target, EVENT_HIDDEN, () => {
+      EventHandler.one(target, EVENT_SHOW, (showEvent) => {
-        if (isVisible(this)) {
+        if (showEvent.defaultPrevented) {
-          this.focus();
+          // only register focus restorer if modal will actually get shown
+          return;
+        }
+
+        EventHandler.one(target, EVENT_HIDDEN, () => {
+          if (isVisible(this)) {
+            this.focus();
+          }
+        });
+      });
+
+      // avoid conflict when clicking modal toggler while another one is open
+      const alreadyOpenedModals = SelectorEngine.find(OPEN_SELECTOR);
+      alreadyOpenedModals.forEach((modal) => {
+        if (!modal.classList.contains('modal-non-invasive-show')) {
+          Modal.getInstance(modal).hide();
         }
       });
+
+      const data = Modal.getOrCreateInstance(target);
+
+      data.toggle(this);
     });
 
-    // avoid conflict when clicking modal toggler while another one is open
+    enableDismissTrigger(Modal);
-    const alreadyOpenedModals = SelectorEngine.find(OPEN_SELECTOR);
+    callbackInitState.set(component.name, true);
-    alreadyOpenedModals.forEach((modal) => {
+  }
-      if (!modal.classList.contains('modal-non-invasive-show')) {
-        Modal.getInstance(modal).hide();
-      }
-    });
-
-    const data = Modal.getOrCreateInstance(target);
-
-    data.toggle(this);
-  });
-
-  enableDismissTrigger(Modal);
 
   SelectorEngine.find(initSelector).forEach((el) => {
     const selector = getSelectorFromElement(el);
@@ -312,6 +346,10 @@ const popoverCallback = (component, initSelector) => {
 };
 
 const offcanvasCallback = (component, initSelector) => {
+  if (callbackInitState.has(component.name)) {
+    return;
+  }
+
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
   const OPEN_SELECTOR = '.offcanvas.show';
   const Offcanvas = component;
@@ -362,9 +400,14 @@ const offcanvasCallback = (component, initSelector) => {
   });
 
   enableDismissTrigger(Offcanvas);
+  callbackInitState.set(component.name, true);
 };
 
 const scrollspyCallback = (component, initSelector) => {
+  if (callbackInitState.has(component.name)) {
+    return;
+  }
+
   const EVENT_LOAD_DATA_API = `load.bs.${component.name}.data-api`;
   const ScrollSpy = component;
 
@@ -373,6 +416,8 @@ const scrollspyCallback = (component, initSelector) => {
       ScrollSpy.getOrCreateInstance(el);
     });
   });
+
+  callbackInitState.set(component.name, true);
 };
 
 const tabCallback = (component, initSelector) => {
@@ -382,29 +427,36 @@ const tabCallback = (component, initSelector) => {
   const SELECTOR_DATA_TOGGLE_ACTIVE = `.${CLASS_NAME_ACTIVE}[data-mdb-tab-init], .${CLASS_NAME_ACTIVE}[data-mdb-pill-init], .${CLASS_NAME_ACTIVE}[data-mdb-toggle="list"]`;
   const Tab = component;
 
-  EventHandler.on(document, EVENT_CLICK_DATA_API, initSelector, function (event) {
+  if (!callbackInitState.has(component.name)) {
-    if (['A', 'AREA'].includes(this.tagName)) {
+    EventHandler.on(document, EVENT_CLICK_DATA_API, initSelector, function (event) {
-      event.preventDefault();
+      if (['A', 'AREA'].includes(this.tagName)) {
-    }
+        event.preventDefault();
+      }
 
-    if (isDisabled(this)) {
+      if (isDisabled(this)) {
-      return;
+        return;
-    }
+      }
 
-    Tab.getOrCreateInstance(this).show();
+      Tab.getOrCreateInstance(this).show();
-  });
-
-  EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
-    SelectorEngine.find(SELECTOR_DATA_TOGGLE_ACTIVE).forEach((element) => {
-      Tab.getOrCreateInstance(element);
     });
-  });
+
+    EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
+      SelectorEngine.find(SELECTOR_DATA_TOGGLE_ACTIVE).forEach((element) => {
+        Tab.getOrCreateInstance(element);
+      });
+    });
+
+    callbackInitState.set(component.name, true);
+  }
 };
 
 const toastCallback = (component, initSelector) => {
   const Toast = component;
 
-  enableDismissTrigger(Toast);
+  if (!callbackInitState.has(component.name)) {
+    enableDismissTrigger(Toast);
+    callbackInitState.set(component.name, true);
+  }
 
   // MDB init
   SelectorEngine.find(initSelector).forEach((element) => {
@@ -415,7 +467,10 @@ const toastCallback = (component, initSelector) => {
 const rippleCallback = (component, initSelector) => {
   const Ripple = component;
 
-  EventHandler.one(document, 'mousedown', initSelector, Ripple.autoInitial(new Ripple()));
+  if (!callbackInitState.has(component.name)) {
+    EventHandler.one(document, 'mousedown', initSelector, Ripple.autoInitial(new Ripple()));
+    callbackInitState.set(component.name, true);
+  }
 };
 
 export {