Show overflow content in Collapse once entered

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

• Once a Collapse has finished animating in and has the entered className, overflow should be set to visible so borders, box-shadows, Checkbox ripples, contents positioned outside etc are visible.

Current Behavior

Currently the implementation only sets the height to auto, and the contents of a component which uses Collapse (like StepContent) can be clipped e.g. shadows around Papers, Cards etc

Steps to Reproduce (for bugs)

https://codesandbox.io/s/koo6069llv

Context

The most common case where this will pop up is when using a form in a Stepper with orientation set to vertical. The ripple from a Checkbox will clip at the edge of the Collapse used in StepContent.

Your Environment

See codesandbox link above.

Workaround

I was able to use theme overrides to work around this for now:

createMuiTheme({
  overrides: {
    MuiCollapse: {
      entered: {
        height: "auto",
        overflow: "visible"
      }
    }
  }
});

[sarkistlt]

@mdarens workaround saved my day, thanks!

[mcoevert]

I’ve noticed this problem when using a Autocomplete component in a ExpansionPanel. The suggestions from the Autocomplete component are hidden.

I will use the solution of @mdarens for now.