Topic: Adding btn-floating to open a modal generates an Uncaught TypeError

giorgio.ponza priority asked 3 years ago


Expected behavior

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

Actual behavior

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.)

Snippet


Dawid Wajszczuk staff answered 3 years ago


Hi,

@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 .

Keep coding,
Dawid


giorgio.ponza priority commented 3 years 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 3 years 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 3 years 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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: 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