REACT <Button ref={...} bug

[Hirn]

I’m trying to use a ref with a Button component, but myRef.current is always null.
Interestingly, if I do the same thing with a MenuItem, the ref works as expected.

I found a workaround that allows refs to work. I modified the __createSCInstance function in ReactComponent.js like this:

__createSCInstance(className, config) {
    for (let prop of this.REACT_PROPS) delete config[prop];

    if (!config.children && config.childComponents) {
        config.children = config.childComponents;
    }

    // ***************begin workaround for refs
    const created = isc[className].create(config);
    if (this.props && this.props.REF) {
        const r = this.props.REF;
        if (typeof r === "function") {
            r(created);
        } else {
            r.current = created;
        }
    }
    //***************** end workaround for refs
    return created;
}

Then, in my project, I create the button like this:

<Button
    REF={this.loadButton}
    title={Strings.get("load")}
    disabled="true"
    click={this.loadData.bind(this)}
/>

I’m confident that you’ll find a more elegant solution that allows using the standard React ref.

PS:
I noticed that the ref works for both <MenuItem> and <Button>, but only in this case:

render() {
    return (
        <>
            <Button {...Properties.getButton()}
                ref={this.loadButton}
                title={Strings.get("load")}
                disabled="true"
                click={this.loadData.bind(this)}
            />
        </>
    );
}

However, if I do it like this:

render() {
    let owner = this;
    return (
        <VLayout>
            <Button {...Properties.getButton()}
                ref={this.loadButton}
                title={Strings.get("load")}
                disabled="true"
                click={this.loadData.bind(this)}
            />
        </VLayout>
    );
}

then ref.current is null.