Topic: jQuery .fadeout() complete event broken
Expected behavior Jquerys fadeout function has a callback for a function when the fadeout is completed. So after the fadeout completed, the code within the inner function should be executed. In this case the browser should display the alert.
$("itemId").fadeOut("fast", function () { alert("Hello!")})
Actual behavior The code does not get executed, as MDB 5 has an own implementation for $("").fadeout, which does not support the callback.
To trigger this bug, jQuery has to be imported before mdb-ui-kit.js. Importing jQuery after it, will work as a workaround.
Tested with Webpack, Typescript, MDB 5.0 and Jquery 3.6.1. Typescript Module and Target is ES 2022.
Resources (screenshots, code snippets etc.)
It looks like a similar issue is occurring with the jQuery slideToggle() method except in addition to that, you also can't chain the slideToggle method (for example calling addClass right after slideToggle in a chained one-line statement fails).
It was working in MDB5 v4.1.0 so it looks like something with v5.0.0 caused issues with some jQuery functions (specifically around animations). I couldn't get it to work even by importing jQuery prior to MDB though so the workaround didn't work for the slideToggle method unfortunately.
MDB team let me know if you want me to create a new thread for this but it sounds somewhat similar/related.
Mateusz Lazaru staff commented 2 years ago
Thank you! There is no need to create new issue, because I've attached your comment to the fix task.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 5.0.0
- Device: Laptop/Mobile
- Browser: Chrome/Edge/Firefox
- OS: Win10
- Provided sample code: No
- Provided link: No
Mateusz Lazaru staff commented 2 years ago
Thank you for reporting this. We will fix this bug soon.