Adding btn-floating to open a modal generates an Uncaught Ty

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

giorgio.ponza priority asked 2 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

Add comment

Dawid Wajszczuk staff answered 2 years ago

1 0 Best answer

Please insert min. 20 characters.

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

Add comment

UNNdev priority answered 2 years ago

0 0 Best answer

Please insert min. 20 characters.

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.

Add comment

Write

Create snippet

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

giorgio.ponza

87Support score
10Questions 3Answers 3Snippets