Topic: Lightbox issue on mdb 7.3.2
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.)
What was your previous version?
Can you prepare a snippet with code that results in the error?
- 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 4 months ago
Have you tried using Lightbog getOrCreateInstace method on pageload?
It initiates component only if it needs it.
jseird pro premium 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.
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.3.2
- Device: Mac
- Browser: All
- OS: MacOS
- Provided sample code: No
- Provided link: No