Stops working after drop event using dragula

[quiringk]

trafficstars

I am using css-element-queries successfully in my Angular 2+ project. I have a page with a bunch of different components that have element-queries inside of them. I am also using dragula to allow dragging and dropping of these components for reordering. Everything is working fine until I drop a component after or before another component. Once that happens, the element queries stop working for the component that was dragged and dropped, but continue working for the other components.

I tried firing ElementQueries.init() &/or ElementQueries.update() in the dragula drop event without any success.

I am initializing ElementQueries in each component by calling ElementQueries.update() after the data has loaded but if I called ElementQueries.init() that works fine as well.

Any idea why a dragula drop event would stop the element queries in that dropped component to stop working? Is there a way to "refresh" the element queries to start working again?

[marcj]

Same issue as in https://github.com/marcj/css-element-queries/issues/171 I guess.

[quiringk]

So I figured out a way to capture the drag and drop event, and then I can remove the DOM and re-add it using angulars *ngIf, and then call ElementQueries.update(). However, this seems to make the performance of the page get worse the more I do that. Should I be calling something else at that moment?

[marcj]

Well, we need to add the reset method in our API as described in the linked issue, so you can call it on those elements that have been moved in the DOM. If you could send us a pull-request with that change, we could merge it and you have immediately a real fix.

[DmitryEfimenko]

so, the reset api is added to the ResizeSensor. However, there's no easy way to reset all these elements using ElementQueries. I can submit a PR fixing this. Once that is available, we could easily subscribe to drop events in dragula and call ElementQueries.reset()