Topic: Adding btn-floating to open a modal generates an Uncaught TypeError
giorgio.ponza priority asked 1 year ago
I need to open a modal using a floating button, so i add the class btn-floating to a button and i expect it to work
If i click on the button with class 'btn-floating' an error occurs in console
Uncaught TypeError: this._element is undefined value modal.js:340 value modal.js:211 r modal.js:88
Resources (screenshots, code snippets etc.)
Dawid Wajszczuk staff answered 1 year ago
@giorgio.ponza I can't see your error in this snippet. I can only see errors pointed out by @UNNdev and they are related to FA icons. To get rid of them add
pe-none class to FA icons in buttons. Here is the snippet https://mdbootstrap.com/snippets/standard/d-wajszczuk/3216319#html-tab-view .
giorgio.ponza priority commented 1 year ago
If you click on the rightmost button (the float one), the error suddenly occurs. To generate an error with the 'rounded' button, you have to click some times. Adding the 'pe-none' to the icon solves the problem, but the button stays in the 'clicked' status, with a darker blue. I will accept your answer, but to me it seems still a bug.
Dawid Wajszczuk staff commented 1 year ago
Hi. Bootstrap does the same thing with buttons stayed as 'clicked' while the modal is closed https://mdbootstrap.com/support/standard/adding-btn-floating-to-open-a-modal-generates-an-uncaught-typeerror/ . So I wouldn't consider this as a bug.
UNNdev priority answered 1 year ago
Actually, I get an error almost every time I click on any button in your example.
mdb.min.js:316 Uncaught TypeError: Cannot read property 'classList' of undefined at r.value (mdb.min.js:316) at r.value (mdb.min.js:316) at new r (mdb.min.js:316) at r.<anonymous> (mdb.min.js:316) at new r (mdb.min.js:316) at HTMLAnchorElement.<anonymous> (mdb.min.js:316) at HTMLDocument.e (mdb.min.js:310)
The funny (it really isn't) thing is that I am also getting such errors in my project and have no clue why. Using Chrome / Chromium based Edge on Windows 10.
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.9.0
- Device: Desktop
- Browser: Firefox 89.0.2
- OS: Linux
- Provided sample code: No
- Provided link: Yes