dash
dash copied to clipboard
Ref not being passed between wrapped parent and child components
Describe your context
dash 2.9.3
dash-core-components 2.0.0
dash-html-components 2.0.0
dash-table 5.0.0
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
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>
);
}
}
IconButton.react.js
import React, { Component, forwardRef } from "react";
import PropTypes from "prop-types";
import { ExternalIconButtonComponent } from "@somelibrary";
class IconButtonComponent extends Component {
constructor(props) {
super(props);
this.onClick = this.onClick.bind(this);
}
onClick() {
this.props.setProps({ n_clicks: this.props.n_clicks + 1 });
}
render() {
const {id, setProps, innerRef, ...rest} = this.props;
return (
<ExternalIconButtonComponent
id={id}
ref={innerRef}
onClick={this.onClick}
{...rest}
/>
);
}
}
const IconButton = forwardRef(function IconButton(props, ref) {
return <IconButtonComponent innerRef={ref} {...props} />;
});
export default IconButton;
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