Disabling and re-enabling an element component resets its material

Issue:
We wanted to animate a texture in an element component, similar to the Tutorial Animated Texture. In case the same material should be animated on multiple instances of element components, we cloned the material and set the material property of the elementComponent in code. But after disabling the entity and re-enabling it, the texture was not animated anymore.

What we found so far:
It seems like the element component is binding the material again once it's enabled. But instead of using the current material, it is using the material from the linked asset. It is even comparing the asset.resource to this._material and deliberately choosing the asset's material over the current one. ImageElement.onEnable
This does not look like the preferred behaviour, as this would get rid of any custom material set in code. Our current workaround is to set the asset reference to null.

Steps to reproduce:

• create a new material in code, either from scratch or by cloning
• replace the material property of an imageElement, which already has a reference to another material asset
• disable the imageElement, then enable the imageElement
• you should now see the original material
• example project

This issue does not seem to be the case for model components. Disabling and re-enabling does not reset the material of the model. Also for the sake of completness, this is the forum link where we reported this issue first.

Start in src/framework/components/element/image-element.js around ImageElement.onEnable, then reproduce the behavior using the linked example project: replace an image element's material, disable it, and enable it again. Compare the result with model components. Done means a custom material assigned in code remains in use after the image element is toggled.