-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Tooltip] create around RootRef #14574
Comments
@jonfreedman What about the warning in the console? Moving the Tooltip component one level up or down solve the problem. Can you confirm? |
If you wrap class SimpleTable extends React.Component {
ref = React.createRef()
render() {
const { classes } = this.props;
return (
<Paper className={classes.root}>
<Table className={classes.table}>
<TableHead>
<TableRow>
<TableCell>Dessert (100g serving)</TableCell>
<RootRef rootRef={this.ref}>
<Tooltip title="Cal" placement="right">
<TableCell align="right">Calories</TableCell>
</Tooltip>
</RootRef>
<TableCell align="right">Fat (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map(row => (
<TableRow key={row.id}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Paper>
);
}
componentDidMount() {
console.log(this.ref.current)
}
} Solves the problem, logs <th class="MuiTableCell-root-1195 MuiTableCell-head-1196 MuiTableCell-alignRight-1205" scope="col" title="Cal">Calories</th> to console. But is that confusing? <RootRef ref={ref}>
<Tooltip title="Some title">{content}</Tooltip>
</RootRef> Wouldn't this imply we want to reference the root node of the |
I wouldn't fight too much with the The tooltip renders a fragment, the first child is the wrapped children. findDOMNode always returns the first child, so it works. In the future, you will be able to attach a ref directly to the TableCell or use the React.Fragment ref component. cc @eps1lon |
@oliviertassinari I look forward to using innerRef directly - I couldn't get it to work on the latest version (React was telling me I should use a ForwardRef). I did fix the issue by putting the |
@jonfreedman I was referring to the usage of the |
@jonfreedman The inner component of You may be interested in subscribing to #14415. We're tracking progress there about the general state of refs in material-ui. We hope to support strict mode in v4 while keeping the migration cost for non-strict mode users as low as possible. |
Expected Behavior 🤔
Tooltip should be functional and inner or ref exposed
Current Behavior 😯
Warning on the console and tooltip is not functional although ref is exposed
Steps to Reproduce 🕹
Link: https://codesandbox.io/s/2wy34rmpj0
Context 🔦
I want to display a tooltip for a table cell and also access the underlying dom element of the cell
Your Environment 🌎
The text was updated successfully, but these errors were encountered: