[Table] Sticky header table with buttons/inputs

[Studio384]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

https://codesandbox.io/s/create-react-app-6v20t

Buttons and input are visible on top of the sticky header.

Expected Behavior 🤔

The buttons and input go below the sticky header.

Steps to Reproduce 🕹

Use a button or input field (I haven't checked anything else) in a table with sticky headers.

Context 🔦

I'm trying to make a table which has options within its rows.

Your Environment 🌎

Tech	Version
Material-UI	v4.4.0
React	v16.9.0
Browser	Any

[oliviertassinari]

@Studio384 Thanks for the report. It seems that the fix is simple, creating a stacking context address it:

diff --git a/packages/material-ui/src/TableCell/TableCell.js b/packages/material-ui/src/TableCell/TableCell.js
index a81b2417e..a034c45fe 100644
--- a/packages/material-ui/src/TableCell/TableCell.js
+++ b/packages/material-ui/src/TableCell/TableCell.js
@@ -101,6 +101,7 @@ export const styles = theme => ({
     position: 'sticky',
     top: 0,
     left: 0,
+    zIndex: 1,
     backgroundColor: theme.palette.background.default,
   },
 });

[Ramkumar92]

Thanks, Super easy fix, was obvious but didn't try until seeing this,
Why does this occur only on certain components and not on other components like Typography?

[oliviertassinari]

To be honest, I don't know why it happens with such component. Maybe we already create a stacking context for them?

[oliviertassinari]

Does anyone want to submit a pull request for the problem? :)

[LavaToaster]

I can open a new issue for this, but I figure this is basically the same issue. Buttons work, but the checkboxes are still affected.

See: https://codesandbox.io/s/create-react-app-4stgk

[oliviertassinari]

@Lavoaster I can't reproduce it. What environment are you using? Do you have a screenshot,

[LavaToaster]

@oliviertassinari Sorry, I just realised that the issue is a little bit different.

In this case if you try to check the box in the header, whilst a checkbox is beneath it, it checks the the one beneath the sticky header.

I'm on mac OS 10.15, with Chrome77.0.3865.120, I also tested this in safari and the same issue occurs.

[oliviertassinari]

@Lavoaster I can reproduce it too. The z-index: 1 added in #17389 conflicts. What about increasing the z-index to 2 for the sticky header?

[LavaToaster]

@oliviertassinari That makes it work for me.

[oliviertassinari]

@Lavoaster Do you want to submit a pull request? Or do you have a better fix in mind? :)