Unable to forwardRef

The proper way of passing ref in React is this ref={ref} but Cleave supports only the older approach htmlRef={r => ref=r}.

But this is not sufficient for forwarding refs (docs)

The workaround I am doing is this: htmlRef={r => ref && (innerRef.current = r)} but that’s not right and it’s throwing lint error because current should be read-only

The desired state is to be able do this htmlRef={innerRef}

[bigwoof91]

Would be great to have a suggested/working solution for this - running into the same issue with forwarding refs and useRef.

[bel0v]

A solution that worked for me:

// reduced example
const MyInput = React.forwardRef<HTMLInputElement, MyInputProps>((props, ref) => {
  return (
    <Cleave
      {...props}
      htmlRef={(inputNode: HTMLInputElement) => {
        if (!ref) {
          return
        }
        if (typeof ref === 'function') {
          ref(inputNode)
        } else {
          ref.current = inputNode
        }
      }}
    />
  )
})
MyInput.displayName = 'MyInput'