multiple xcomponents on a page sometimes render in wrong location

[mmairs9-zz]

I have in some cases 2 xcomponents on the same page. Ive noticed that the odd time one xcomponent is rendering in place of another as if they are getting mixed up.

Ive added a delay in rendering the 2nd component to get around this issue for the time being.

[bluepnume]

Hey @mmairs9 thanks for the report -- let me try to set up a test scenario and see if I can repro.

[bluepnume]

Hey @mmairs9 -- can you provide more details for what you're doing and what happens on the page?

I'm running a test using the xcomponent basic demo, rendering two components, and I consistently see them rendered in the correct place:

    <div id="container"></div>
    <div id="container2"></div>

    <script>
        MyLoginXComponent.render({
            prefilledEmail: 'foo@bar.com',

            onLogin: function(email) {
                console.log('User logged in with email:', email);
            }
        }, '#container');

        MyLoginXComponent.render({
            prefilledEmail: 'foo2@bar.com',

            onLogin: function(email) {
                console.log('User logged in with email:', email);
            }
        }, '#container2');
    </script>

[mmairs9-zz]

I have have had trouble recreating it today as it happened sporadically. Will see if I can recreate over the next few days.

On Wed, May 24, 2017 at 11:40 PM, Daniel Brain notifications@github.com wrote:

Hey @mmairs9 https://github.com/mmairs9 -- can you provide more details for what you're doing and what happens on the page?

I'm running a test using the xcomponent basic demo, rendering two components, and I consistently see them rendered in the correct place:

<div id="container"></div>

<div id="container2"></div>

<script>
    MyLoginXComponent.render({

        prefilledEmail: 'foo@bar.com',

        onLogin: function(email) {
            console.log('User logged in with email:', email);
            document.querySelector('#result').innerText = email + ' logged in!';
        }

    }, '#container');

    MyLoginXComponent.render({

        prefilledEmail: 'foo2@bar.com',

        onLogin: function(email) {
            console.log('User logged in with email:', email);
            document.querySelector('#result').innerText = email + ' logged in!';
        }

    }, '#container2');

</script>

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/krakenjs/xcomponent/issues/91#issuecomment-303872130, or mute the thread https://github.com/notifications/unsubscribe-auth/ACsqLWRuVfr9s9yJ0Oq0rMeqdIP8RG5Dks5r9LHlgaJpZM4NjWF0 .

[mmairs9-zz]

The delay i put in place in creating the second component seemed to do the trick. I have not been able to reproduce since. This is probably good to close!

[bluepnume]

OK, closing. Little worried that something like what you described could happen without artificial delays, so please let me know if you ever repro consistently in future. Feels a little like a race-condition of some kind.