Topic: Dropdown - double Dropdown init after content dynamical reload
Dropdown menus (only dropdowns from all components I have used) has problem with initialization.
There is problem with dynamic loaded content which includes Dropdown menu. First dropdown initializaction works fine. If you change content via ajax etc, you get "new" dropdown menus which have to be initialized. But this "new" menus has the same ID (and dropdown menus are not destroyed as well).
I have analyzed crazy behavior of dropdown init and reproduced it in simple snippet:
1.) open snippet
2.) click dropdown button => not working = CORRECT
3.) click button "init dropdown" => menu works = CORRECT
4.) reload content (with the same dropdown) => menu doesent work = CORRECT
5.) click "Init dropdown" => classes and attributes come to menu, but menu DO NOT WORK = INCORRECT
6.) after another content reload you can do init and menu will works.
I have found no difference between "new mdb.Dropdown()" and "mdb.Dropdown.getOrCreateInstance()".
This bug makes impossible to use dropodowns in single page applications. I know about this problem for long time but I was not able to reproduce it excactly where the problem is.
But just now I have spent several hours with analyzing and do reproduce in snippet. Now you have analyzed problem and "served on gold plate'.
Please, this is critical bug from my point of view and I am looking forwad to fix it.
I don't understand that nobody reported this issue and this issue is still not fixed.
https://mdbootstrap.com/snippets/standard/meesha81/6141670
Components are not suppose work right away after they are added dynamically.
They need initation. Placing them in the same position in the DOM does not mean they are the same thing and that they were initiated.
Best practice is to do getOrCreateInstance for all components included in reloded section.
meesha81 pro premium priority commented 6 months ago
Sorry, this is not relevant. You didn't go thru the snippet. You should understand that you have CRITICAL BUG IN dropdown and this answer is invalid. Really invalid, trust me.
We are sorry for that. We misunderstood the issue. We checked this further and it seems that the issue appears if the component has not been initialized automatically (by data attribute data-mdb-dropdown-init). It would be enough if another dropdown on the page was initiated automatically.
We are already working on resolving this bug. We will release a fixed version very soon.
So for now, the only thing I can recommend is initiating this dropdown automatically. The problem will be if you add this dropdown dynamically and it is not visible in the DOM when the page loads. Then I recommend waiting for the fixed version. If you can't wait and need a temporary solution for dropdown added dynamically, you can add a dropdown on the page with the data attribute data-mdb-dropdown-init and the css class d-none (so that it is not visible on the page). This should help.
meesha81 pro premium priority commented 6 months ago
Yes, of course. Single page cannot initialize automatically, if understand it. So I have to wait for fixed version. We are developing large project and I do mdb testing during our implementation. Thats why I feed you almost with relevant issues.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.3.1
- Device: PC
- Browser: Chrome
- OS: Win11
- Provided sample code: No
- Provided link: Yes