Unable to access refs when using compose with Redux connect and Radium

[wookiem]

Problem

React component is unable to access refs in a second React component that uses Redux compose to combine Redux connect and Radium.

In the example below, setFocus in Items.js cannot access addItem.refs when AddItem.js is composed with Redux connect and Radium.

However, when I comment out connect(mapStateToProps) in AddItem.js (as shown below), then addItem.refs['selector'].focus(); is able to access refs and works as expected.

Environment

react: 15.0.2
react-redux: 4.4.5
redux: 3.5.2
radium: 0.18.1

Items.js

import React, {Component} from 'react';
import { connect } from 'react-redux';

import ItemRow from '../components/ItemRow';
import AddItem from '../containers/AddItem';

class Items extends Component {
    constructor(props) {
        super(props);
        this.setFocus = this.setFocus.bind(this);
    }

    setFocus() {

        var addItem = this.refs['AddItem'];
        addItem.refs['selector'].focus();
    }

  render() {

    return (
        <div>
                <ItemRow setFocus={this.setFocus} />
                <AddItem ref={'AddItem'} />
            </div>
        );   
    }
}

const mapStateToProps = (state) => {
    return { state};
};

export default connect(mapStateToProps)(Items);

ItemRow.js

import React, {Component} from 'react';
import Radium from 'radium';

class ItemRow extends Component {
    constructor(props) {
        super(props);
        this.onKeyUp = this.onKeyUp.bind(this);
    }

    onKeyUp(e) {
        if (e.key === 'Enter') {
            this.props.setFocus();
        }       
    }

    render() {

        return (
            <div>
                <input
                    type="text"
                    defaultValue={0}
                    onKeyUp={this.onKeyUp}
                />
            </div>
        );
    }
}

export default Radium(ItemRow);

AddItem.js

import React, {Component} from 'react';
import Radium from 'radium';
import { compose } from 'redux';
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return state
}

class AddItem extends Component {      
  render() {                    
        return (
            <div> 
                <input
                    ref="selector"
                    type="text"
                    defaultValue={0}
                />
            </div>
        );
    }
}

const enhance = compose(
//  connect(mapStateToProps),
    Radium
);

[jimbolla]

In AddItem.js, you'll have to do:

const enhance = compose(
  connect(mapStateToProps, null, null, { withRef: true }),
    Radium
);

and then in Items.js do:

addItem.getWrappedInstance().refs['selector'].focus();

[wookiem]

Your solution works perfectly. Thanks @jimbolla !

[ssuvorov]

Have another example with issue:

1. HearingLessons component which has state

const withData = compose(
  graphql(HEARING_LESSONS_QUERY, {
    props: mapProps,
    options,
    withRef: true
  }),
  injectIntl
)

export default withData(HearingLessons)

2. Parent component which wants to access the HearingLessons's state within ref

<HearingLessons
  ref={el => {
    if (!!el) {
       this._hearingLessons = el.getWrappedInstance()
    }
 }}
/>

The problem

• what I have: this._hearingLessons is injectIntl
• what I need: this._hearingLessons is HearingLessons

PS. the part if (!!el) is weird, because el on odd returns null, on even returns graphQL. Maybe someone could also clarify why.