Datetimepicker: Datepicker throws Javascript exception when

Topic: Datetimepicker: Datepicker throws Javascript exception when selecting a date

ikan_nak priority asked 6 months ago

Expected behavior

I do not expect random TypeErrors during use.

Actual behavior

When selecting a date in a Datepicker as part of a datetimepicker element, the Datepicker throws an uncaught TypeError during the updating of the header date. More precisely, it tries to call querySelector on a null element, with the null element supposedly being the container object.

mdb.umd.min.js:20 
 Uncaught TypeError: Illegal invocation
    at Object.findOne (mdb.umd.min.js:20:7124)
    at _b._updateHeaderDate (mdb.umd.min.js:39:303913)
    at _b._handleDateSelection (mdb.umd.min.js:39:303788)
    at HTMLDivElement.<anonymous> (mdb.umd.min.js:39:303356)
    at HTMLDivElement.i (mdb.umd.min.js:20:4008)

Resources (screenshots, code snippets etc.)

Snippet that shows the error: https://mdbootstrap.com/snippets/standard/ikan_nak/6380644 (use the browser console to view the error).

Snippet showing the error

enter image description here

Add comment

Kamila Pieńkowska staff answered 6 months ago

0 0 Best answer

The error does not occur in the snippet. Can you describe how to reproduce it?

ikan_nak priority commented 6 months ago

Open the snippet, then open the browser's console. then click on the datetimepicker to open the datepicker. Select any date, and it will cause an error in the browser console. The error does not get tracked by the"console errors" counter below the snippet.

ikan_nak priority commented 6 months ago

I have added a screenshot, but there's an error on your usercontent.mdbootstrap.com domain related to the TLS certificate. YOu might be able to see it on your servers, but it won't show in the browser.

Kamila Pieńkowska staff commented 6 months ago

I wasn't able to get this error no matter what browser I tried. Do you have any extensions or custom settings?

ikan_nak priority commented 6 months ago

I do not have any extensions or custom settings. I even tried the snippet in Firefox in troubleshooting mode, as well as in a refreshed installation with default settings and no extentions, and I still got the Firefox equivalent of that error in the console. I've made a gif and hosted it on another site, I'll edit it into the question.

ikan_nak priority commented 6 months ago

So I've done some additional testing as well. I do my development on a Windows 10 VM on a remote server with relatively old hardware (10 year old CPU). I cannot replicate this issue myself when opening the snippet in a browser in the client machine. it appears to be some sort of race condition caused by the combination of slower hardware and higher input latency.

ikan_nak priority commented 4 weeks ago

kamila, I looked more into the code and it appears that there is something weird going on after all. Essentially, in multiple places in the Datepicker class, this.container gets used, but as best as I can tell the getter for this has weird behavior. this is the getter:

get container() { return ( SelectorEngine.findOne(${SELECTOR_MODAL_CONTAINER}-${this._toggleButtonId}) || SelectorEngine.findOne(${SELECTOR_DROPDOWN_CONTAINER}-${this._toggleButtonId}) ); }

For some reason this sometimes resolves to null, but it is only when I'm not actively debugging. When I try to figure out what's wrong, it always shows the right value...

This appears to be because this.container references the datepicker, but when you select a day in the calendar, eventually it calls _selectDate, which calls this.close() at the end. Because I'm not using inline as an option, after that it calls _updateHeaderDate(), which at the very start tries to get this.container, but because the datepicker is closed, it's no longer on the page and the call to this.container returns null.

kamila, I looked more into the code and it appears that there is something weird going on after all. Essentially, in multiple places in the Datepicker class, this.container gets used, but as best as I can tell the getter for this has weird behavior. this is the getter:

get container() { return ( SelectorEngine.findOne(<code>${SELECTOR_MODAL_CONTAINER}-${this._toggleButtonId}</code>) || SelectorEngine.findOne(<code>${SELECTOR_DROPDOWN_CONTAINER}-${this._toggleButtonId}</code>) ); }

For some reason this sometimes resolves to null, but it is only when I'm not actively debugging. When I try to figure out what's wrong, it always shows the right value...

This appears to be because this.container references the datepicker, but when you select a day in the calendar, eventually it calls _selectDate, which calls this.close() at the end. Because I'm not using inline as an option, after that it calls _updateHeaderDate(), which at the very start tries to get this.container, but because the datepicker is closed, it's no longer on the page and the call to this.container returns null.

Please insert min. 15 characters.

Kamila Pieńkowska staff commented 3 weeks ago

Sorry, I'm not sure how I can help since I'm unable to recreate this error.

ikan_nak priority commented 3 weeks ago

Kamila, one last update: it turns out that due to a bug in the script that unpacks, transpiles and deploys the mdb source code during development, I have apparently inadvertently been using an outdated version of the source code, potentially even mixing different versions. That might explain why some of the bugs have been unable to be reproduced on your end...

Kamila Pieńkowska staff commented 2 weeks ago

It is good to know that you found a possible reason.

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 8.1.0
Device: Desktop computer
Browser: Edge
OS: Windows 11
Provided sample code: No
Provided link: Yes

ikan_nak

0Support score
16Questions 1Answers 10Snippets