collapsable initialization after importing mdb 7.2.0 UMD .sh

Topic: collapsable initialization after importing mdb 7.2.0 UMD .show

Yvonne Findeis priority asked 4 days ago

Expected behavior

Whenever initialising a collapsable Element with new mdb.Collapse(element) it should initiate hidden. ( Or beeing configurable)

Actual behavior

Single Page Application dynamically loading MDB Elements.

Page initialises with

 <head>
<!-- Font Awesome -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
  rel="stylesheet"
/>
<!-- Google Fonts -->
<link
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
  rel="stylesheet"
/>
<!-- MDB -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/8.1.0/mdb.min.css"
  rel="stylesheet"
/>

and

later a collapsable Element ist loaded and initialised with

new mdb.Collapse(element);

   let collapsableElements = document.querySelectorAll('.collapse');
  if (collapsableElements) {
    collapsableElements.forEach((collapsableElement) => {
      const test = new mdb.Collapse(collapsableElement);
      test.hide();
    });
  }

first, this goes through show() methode of collapse.js (why? ist this configurabel via options in initialization?).

 show() {
if (this._isTransitioning || this._isShown()) {
  return;
}

let activeChildren = [];

// find active children
if (this._config.parent) {
  activeChildren = this._getFirstLevelChildren(SELECTOR_ACTIVES)
    .filter((element) => element !== this._element)
    .map((element) => Collapse.getOrCreateInstance(element, { toggle: false }));
}

if (activeChildren.length && activeChildren[0]._isTransitioning) {
  return;
}

const startEvent = EventHandler.trigger(this._element, EVENT_SHOW);
if (startEvent.defaultPrevented) {
  return;
}

for (const activeInstance of activeChildren) {
  activeInstance.hide();
}

const dimension = this._getDimension();

this._element.classList.remove(CLASS_NAME_COLLAPSE);
this._element.classList.add(CLASS_NAME_COLLAPSING);

this._element.style[dimension] = 0;

this._addAriaAndCollapsedClass(this._triggerArray, true);
this._isTransitioning = true;

const complete = () => {
  this._isTransitioning = false;

  this._element.classList.remove(CLASS_NAME_COLLAPSING);
  this._element.classList.add(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW);

  this._element.style[dimension] = '';

  EventHandler.trigger(this._element, EVENT_SHOWN);
};

const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1);
const scrollSize = `scroll${capitalizedDimension}`;

this._queueCallback(complete, this._element, true);
this._element.style[dimension] = `${this._element[scrollSize]}px`;

}

and before the completet() callback ist run, the hide() mthode gets called and does not get executed because the element is still in transition.

In my Stackblitz this is demonstrated by importing mdb before or after the initialisation.Why is hide() not executed and howto initialize the correct way?

Resources (screenshots, code snippets etc.) https://stackblitz.com/edit/stackblitz-starters-svwna1?file=index.html

Add comment

Kamila Pieńkowska staff answered 4 days ago