Child components can steal their parent's ref.

[mthadley]

This one is more convoluted than I like to normally report, but I still managed to run into it.

Given the following structure:

import Component from 'metal-jsx';

class Form extends Component {
    render() {
        return <form>{this.props.children}</form>;
    }
}

class Wrapper extends Component {
    render() {
        return <div class="well">{this.props.children}</div>;
    }
}

class Card extends Component {
    rendered() {
        console.log("Card:", this.refs.form);
    }

    render() {
        // Here is where things break down, we need to both assign the
        // JSX expression to a variable, and then wrap it in another component.
        //
        // If we just inline the value of content, or change Wrapper to something
        // like a div instead, everything works fine.
        const content = <div>{this.props.children}</div>;
        return <Wrapper>{content}</Wrapper>
    }
}

class App extends Component {
    rendered() {
        console.log("App:", this.refs.form);
    }

    render() {
        return (
            <Card>
                <Form ref="form" />
            </Card>
        );
    }
}

export default App;

You will see the following in the console:

Card: Form {disposed_: false, events_: Array[0], maxListeners_: 10, shouldUseFacade_: false, attachedListeners_: null…}
App: undefined

[mairatma]

Hmmm interesting, I wonder why assigning to a variable causes this. Thanks for reporting, I'll investigate.