Lightbox issue on mdb 7.3.2

Topic: Lightbox issue on mdb 7.3.2

kostyaha priority asked 3 months ago

Expected behavior Before update all works fine Actual behavior After update component lightbox does not init after turbo navigate and i have this error in console:

RangeError: Maximum call stack size exceeded
at String.replace (<anonymous>)
at O (mdb.umd.min-ee2d9d18d7212ff17fda2231cf285dea345f9572f8afe71b3925ce59494c0ab6.js:20:3393)
at D (mdb.umd.min-ee2d9d18d7212ff17fda2231cf285dea345f9572f8afe71b3925ce59494c0ab6.js:20:3551)
at Object.on (mdb.umd.min-ee2d9d18d7212ff17fda2231cf285dea345f9572f8afe71b3925ce59494c0ab6.js:20:4265)
at a_._appendToolbar (mdb.umd.min-ee2d9d18d7212ff17fda2231cf285dea345f9572f8afe71b3925ce59494c0ab6.js:39:176782)
at a_._appendTemplate (mdb.umd.min-ee2d9d18d7212ff17fda2231cf285dea345f9572f8afe71b3925ce59494c0ab6.js:39:175966)
at a_.init (mdb.umd.min-ee2d9d18d7212ff17fda2231cf285dea345f9572f8afe71b3925ce59494c0ab6.js:39:173699)
at new a_ (mdb.umd.min-ee2d9d18d7212ff17fda2231cf285dea345f9572f8afe71b3925ce59494c0ab6.js:39:173326)
at mdb.umd.min-ee2d9d18d7212ff17fda2231cf285dea345f9572f8afe71b3925ce59494c0ab6.js:44:85627
at Array.forEach (<anonymous>)

Resources (screenshots, code snippets etc.)

Add comment

Grzegorz Bujański staff answered 3 months ago

0 0 Best answer

Thanks for reporting. I see that init via JS doesn't work sometimes, but I don't get a stack size error. Try this solution:

const lightboxEl = document.querySelector('#lightbox')
lightboxEl.dataset.mdbLightboxInit = true;
const Lightbox = mdb.Lightbox
mdb.initMDB({Lightbox})

If you still have an error, let me know. We will try to fix init via JS as soon as possible.

Add comment

kostyaha priority answered 3 months ago

0 0 Best answer

Please insert min. 20 characters.

MDB5 Version: PRO 7.2.0 works well 7.3.1 , 7.3.2 raise error on

function O(t, e, i) { const s = "string" == typeof e , n = s ? i : e; let o = t.replace(x, ""); const a = T[o]; a && (o = a); return A.indexOf(o) > -1 || (o = t), [s, n, o] }

in my rails app with stimulus and turbo i init some mdb components with data attributes and some with stimulus controllers and component constructor as new mdb.Component(element) with Lightbox i have issue in this case

if i refreshes page Lightbox properly init but if i navigate to page with Lightbox it does't

Kamila Pieńkowska staff commented 3 months ago

Have you tried using Lightbog getOrCreateInstace method on pageload? It initiates component only if it needs it.

jseird priority commented 3 months ago

Same here. Works until 7.3.0 When initialized manually via JS: mdb.Lightbox.getOrCreateInstance(document.getElementById('lightbox')) the stack size error also shows up.

Add comment

Kamila Pieńkowska staff answered 3 months ago