emberjs / emberjs/rfcs

No way to listen for changes to `this.element` on modifier

Open
#798 4 comments 0 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.