`Handle` does not forward `ref` prop to contained `<div>`

We’re building a flow programming tool where nodes can have multiple inputs and outputs.

Currently these handles are being rendered with a piece of text as a child, and this text is an unknown length.

As such, the Handle is being styled as such:

style={{
  top: `${top}px`,
  height: '15px',
  width: 'auto',
  left: `-${width}px`
}}

Note: Additional styling is applied but these are the important ones as far as positioning go.

I have width defined as state in a wrapping component, I need to be able to get the width of the inner div rendered by the Handle component, but passing <Handle ref={handleRef} /> never resolves.

It would be useful if Handle forwarded the ref prop as detailed here Forwarding refs to DOM components

I can see here: https://github.com/wbkd/react-flow/blob/64d1913356d171fd2c4303c918c3e375f57cbee7/src/components/Handle/index.tsx#L95

The ...rest of the props are being applied to the div, but I’ve got a feeling that it doesn’t work for ref and instead it needs explicitly forwarding using React.forwardRef

[ckpearson]

It’s perhaps worth noting that I’ve been able to sidestep it by:

1. Making the handle a flex container
2. Adding a child div with flex-1 and width:100%
3. Connecting that div with the ref

[moklick]

We are now forwarding the ref. Released in v9.6.7