No way to listen for changes to `this.element` on modifier
- Dominant language
- No language data
- Stars
- 801
- Forks
- 409
- PR merge metrics
- No merged PRs in 30d
Description
(This was originally an issue on `ember-modifier` [here](https://github.com/ember-modifier/ember-modifier/issues/174) but it was concluded that its the underlying infrastructure that needs changing, not `ember-modifier` so I created the issue here instead.)
I built [a modifier](https://gist.github.com/emattias/5cf683aa329d42104fdab490102b035f#file-modifiers-custom-modifier-js) heavily based on @miguelcobain:s [css-transitions modifier](https://github.com/peec/ember-css-transitions/blob/master/addon/modifiers/css-transition.js).
It lets you animate an element out by cloning it and keeping track of an elements `nextElementSibling` and insert the clone before it.
In this example I have an `ember-dragula` list implemented and every item in the list uses my [custom-modifier](https://ember-twiddle.com/5cf683aa329d42104fdab490102b035f?openFiles=modifiers.custom-modifier%5C.js%2C).
I was able to work around it by adding a [MutationObserver](https://gist.github.com/emattias/5cf683aa329d42104fdab490102b035f#file-controllers-application-js-L37-L41) tracking removed nodes in the list and sending that array of removed nodes as an argument which triggers `didUpdateArguments` and in that [I update nextElementSiblings](https://gist.github.com/emattias/5cf683aa329d42104fdab490102b035f#file-modifiers-custom-modifier-js-L29-L36). This fixes this problem, see video, showing the bug.
In the [twiddle](https://ember-twiddle.com/5cf683aa329d42104fdab490102b035f) I add a green outline for 3 seconds when an element is removed. Notice how when the mutation observer the outline is on the wrong element for the second deleted item:
### MutationObserver off
https://user-images.githubusercontent.com/351537/153926785-5bf00247-e7c4-482b-b637-0c0e2674324b.mp4
### MutationObserver on
https://user-images.githubusercontent.com/351537/153926806-aa6c656c-3ad2-4c13-80f7-874718c2be98.mp4
Maybe we could add something like a `didUpdateElement` event or have `this.element` changes trigger `didUpdateArguments`?
Or a better solution might be if we could hook in right before `this.element` is removed from the dom. That way we would not need to [save the nextElementSibling](https://gist.github.com/emattias/5cf683aa329d42104fdab490102b035f#file-modifiers-custom-modifier-js-L23) on didInstall.
But if we can't add a hook to right before the element is removed from the dom I guess hooking in every time this.element is changed would also work.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.