innerRef getting completely ignored

Question

I am running into an off issue where my innerRef prop on a component is getting totally swallowed, and never ran.

Here is what my component implementation looks like:

<StyledPopOver
  innerRef={el => (this.popOverEl = el)}
  transitionState={transitionState}
  animationTiming={animationTiming}
  style={this.getAnchorPosition()}
  {...styledProps}
>
  {children}
</StyledPopOver>

And here is what the style component definition looks like:

const StyledPopOver = styled.div`
  display: table-cell;
  transform-origin: top;
  transition-property: all;
  position: fixed;
  z-index: 9998;

  opacity: 0;
  transform: scaleY(0);

  ${props => {
    switch (props.transitionState) {
      case ENTERING:
        return css`
          opacity: 1;
          transform: scaleY(1);
          transition-duration: ${passedProps =>
            passedProps.animationTiming.enter}ms;
        `
      case ENTERED:
        return css`
          opacity: 1;
          transform: scaleY(1);
        `
      case EXITING:
        return css`
          transition-duration: ${passedProps =>
            passedProps.animationTiming.exit}ms;
        `
      default:
        return null
    }
  }};
`

If I log the props being passed into the styled component, I can see innerRef. But if I put a log in my ref setter, it never gets called.

The only thing additionally special about this is that the component is being rendered as a child of a React 16 Portal. That said, I just tested pulling the portal out of the tree, and I get the same result.

Answer 1

I figured this one out, and at the end of the day it is a lesson, so I figured I'd provide my solution.

It turns out that higher up in my tree, I was using "innerRef" in a way that was cascading down to children using {...styledProps}

What I learned is that innerRef should only ever be used as a prop name on a direct styled component. If not a direct styled component, it should only ever be ref (when interacting with a HTML element), or a name other than innerRef (when doing anything special about which element gets the ref handler.