Topic: Datetimepicker: Datepicker throws Javascript exception when selecting a date
ikan_nak
priority
asked 5 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).
Kamila Pieńkowska
staff
answered 5 months ago
The error does not occur in the snippet. Can you describe how to reproduce it?
ikan_nak priority commented 5 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 5 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 5 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 5 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 5 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 1 week 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 Pieńkowska staff commented 6 days ago
Sorry, I'm not sure how I can help since I'm unable to recreate this error.
ikan_nak priority commented 11 hours 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...
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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