Mixin value set programatically becomes altered

[wmurphyrd]

Description: When setting a mixin attribute via setAttribute, the resulting attribute value is different from what was set. This occurs only under the following conditions:

• Using Firefox or Edge (not Chrome)
• Including multiple mixin ids in the string, one of which was created via document.createElement

• A-Frame Version: 0.8.2. Issue did not occur in 0.7.x
• Platform / Device: Firefox 60.0.1 Windows 10, MS Edge
• Reproducible Code Snippet or URL: https://glitch.com/edit/#!/short-spy?path=index.html:7:0

Code extract:

          const mix = 'dynamic-mix cursor-mixin'
          const target = document.querySelector('.gazecaster')
          target.setAttribute('mixin', mix)

Expected result: mixin value is 'dynamic-mix cursor-mixin', ring is blue.

Actual result: mixin value is 'dynamic-mix', ring is white

This is race-condition based, as pausing the process in the debugger causes the issue to not occur. Adding some console output for diganostics, it appears that after initially setting the mixins correctly, an additional call to updateMixins occurs which changes the mixin value to reflect only one mixin and triggers a flurry of attributeChangedCallback and setEntityAttribute calls

Setting Mixin: dynamic-mix cursor-mixin
updateMixins: dynamic-mix cursor-mixin prev: null saved: 
updateMixins: dynamic-mix cursor-mixin prev: undefined saved: dynamic-mix cursor-mixin
Checking Mixin: dynamic-mix cursor-mixin
updateMixins: dynamic-mix prev: dynamic-mix cursor-mixin saved: dynamic-mix cursor-mixin
attrChangedCB dynamic-mix prev: dynamic-mix
setEntityAttribute: dynamic-mix prev: dynamic-mix
attrChangedCB dynamic-mix prev: dynamic-mix
setEntityAttribute: dynamic-mix prev: dynamic-mix
attrChangedCB dynamic-mix prev: dynamic-mix
setEntityAttribute: dynamic-mix prev: dynamic-mix
attrChangedCB dynamic-mix prev: dynamic-mix
setEntityAttribute: dynamic-mix prev: dynamic-mix
Checking mixin later: dynamic-mix

[arthurmougin]

Similar issue but different result :

AFRAME.registerComponent('query', {
    init: function() {
        var string = "vue query"
        this.el.setAttribute('mixin', string);
        console.log(this.el.attributes[3]); //show the mixin value

    }
})

On Opera, firefox developer, and chrome : the log return mixin="query"
On edge the result is vue query (personnal surprise)

[ngokevin]

You need to wait for the <a-mixin> to append to DOM (asynchronous). setTimeout on the update method fixes. https://glitch.com/edit/#!/prickle-marmot?path=index.html:25:0