Within custom components created using the dash-component-boilerplate, passing a Ref between a wrapped parent component and a wrapped child component does not work. An example setup looks like the below.
Tooltip.react.js
import React, { Component } from "react";
import PropTypes from "prop-types";
import { ExternalTooltipComponent } from "@somelibrary";
export default class Tooltip extends Component {
constructor(props) {
super(props);
}
render() {
const {id, setProps, children, ...rest} = this.props;
return (
<ExternalTooltipComponent
id={id}
{...rest}
>
{ children }
</ExternalTooltipComponent>
);
}
}
This may not be the best way of using forwardRef, particularly in the context of Dash. If there is a better or cleaner way to do this, I'd love to hear about it
Describe your context
Describe the bug
Within custom components created using the
dash-component-boilerplate
, passing a Ref between a wrapped parent component and a wrapped child component does not work. An example setup looks like the below.Tooltip.react.js
IconButton.react.js
Expected behavior
The Ref is available within the child component.
Notes
This may not be the best way of using forwardRef, particularly in the context of Dash. If there is a better or cleaner way to do this, I'd love to hear about it