Materialize: [Materialize][JQueryUI][select] dropdown does not close on click

[aminnairi]

Description

Material select inside table does not close on click after JQuery UI script include and table body sorting with $('#tableBody').sortable().

Complete code reproduction

https://pastebin.com/AHdEa2M3

[jacobq]

Note that it appears to work OK when using jQuery 3.1.1 and removing jQuery UI (.sortable())
See http://jsbin.com/yigadu/3

[DanielRuf]

Mixing jQuery UI and Material Design components feels a bit wrong.

[aminnairi]

Why not?

I simply need the Material Design from @Dogfalo and the JQuery's sortable component in my table so that I can do cool things and my users are not forced to go back to Microsoft's Excel, creating their document and then sending it to my app. And maybe using others cool component I discovered from JQuery UI.

I still believe that one day we could do all that in a breeze with Web component like Google are doing it with Drive.

So for now, I used the fallback .browser-default but I hope I could use the Materialize design in a near future for the eye candy effect!

[jacobq]

@aminnairi While the idea of being able to easily integrate things is great, the problem is that when there is overlap of functionality between tools they can conflict with each other. CSS integration tends to be pretty straight-forward, but JS can get messy quickly.

For example, Materialize's drop-down / select control actually wraps the <select> element with other mark-up and binds event handlers to them. If some other piece of code then removes those elements from the DOM and adds them back then there are suddenly 2 problems: (1) the new element doesn't have the necessary handlers bound to it and (2) the old handlers may not have been removed before the element was removed, causing a memory leak.

If you really want to use them together, go ahead, but when you encounter problems like this you'll have to dig in with the dev tools and see why they aren't working together. In this case, I suspect that the sortable is removing / recreating elements in the DOM without removing and reinitializing materialize's event handlers. If that's true, then it's not a bug with either Materialize of jQuery UI but rather with your integrating code, which needs to ensure that these libraries are used according to their APIs.

[bassie1995]

You could use a table plugin specifically geared towards just this: data tables.
For Materialize, I use dataTables and the Materialize 'plug-in' that someone made, and it works pretty well.

[gideonso]

@bassie1995

Can you point us to the plug-in??

[bassie1995]

Discussion is here: https://datatables.net/forums/discussion/26569/feature-request-materialize-css.
Specific comment: https://datatables.net/forums/discussion/comment/88540/#Comment_88540.

[tomscholz]

Closed due inactivity. Feel free to reopen it, if it's still necessary.

[sh4rk60800]

I have fixed it:
http://jsbin.com/tagadoloza/3/edit?html,output