The class name of Table title have unexpected ForwardRef prefix.

[salmanorak]

Describe the bug

The wrappers of title, actions and etc. on the toolbar are having unexpected class names prefix as ForwardRef(MTableToolbarRef).

To Reproduce

1. Kindly open the sandbox below.
2. Inspect the table title
3. Check the table title field HTML on the developer tools.
4. See "ForwardRef(MTableToolbarRef)-title-9" class.

Sandbox

Expected behavior

Instead of "ForwardRef(MTableToolbarRef)" it should have "MTableToolbar" prefix on each part's class name

Screenshots

Desktop :

• OS: [Window 10]
• Browser [chrome]
• Version [96.0.4]

Version:
@material-table/core : 4.3.11
@material-ui/core : 4.12.3

[saiemsaeed]

Thank you for starting this issue @salmanorak, I'm also facing this issue.

[oze4]

Since these components are using ForwardRef, is this expected behavior? Or should that not show up in the rendered class name when using ForwardRef?

I'm asking because I do not know if this is expected or not when using ForwardRef.

[ymor]

@oze4 This is not expected behaviour, you shouldn't see the ForwardRef in the class name, though technically it doesn't actually cause any issues as the class has the correct styles.
I had a quick look and changing

export default withStyles(styles)(MTableToolbarRef);

to

export default withStyles(styles, { name: 'MTableToolbar' })(MTableToolbarRef);

Results in the classes having the MTableToolbar prefix:

[oze4]

@ymor thank you so much for figuring this out! I will make the necessary changes and publish a new version.

[oze4]

Published v4.3.14

[salmanorak]

thanks a lot @oze4 for your quick handling.
Take care and stay healty.

[salmanorak]

@oze4
I have realized that The same issue is also existing in another field. We have the same issue on MTableHeader.

• ForwardRef(MTableHeaderRef)

I have checked all markup but couldn't find any other instance except the ForwardRef(MTableHeaderRef). But please do check the code base for possible other instances.

Should I open another bug entry for this one? @oze4

[oze4]

#441