[SpeedDial] Interaction blocked for elements underneath a hidden SpeedDial (with children).

[amomentunfolding]

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

Expected Behavior

When SpeedDial is hidden, elements underneath its position should function as if the SpeedDial wasn't there at all.

Current Behavior

SpeedDial blocks interaction with elements underneath it when hidden.
This seems to happen only when the SpeedDial has children.

Steps to Reproduce (for bugs)

https://codesandbox.io/s/rlxm5opz6n

1. Set SpeedDial to be hidden
2. Toggle SpeedDial child on/off and try to interact with the button underneath it.

Context

In the app we're building I have the SpeedDial set to a fixed position with some of the actions opening a Drawer component for editing settings. When the Drawer is open the SpeedDial is hidden (because they'd overlap), which because of this issue blocks some elements in the Drawer.
For now I've circumvented the issue by adding this.props.hidden ? null : <SpeedDial ....
Unfortunately this workaround makes the fancy animations disappear 😢

Your Environment

Tech	Version
Material-UI	[email protected]
material-ui/lab	1.0.0-alpha.1
React	16.3.2
browser	FF Developer 60 / Also tried Chrome 66 with same results

[sedelgadof]

hello friends is my first participation
only add this code in the container style={{width: this.state.open ? '' : 0}}
and the fancy animations work perfectly !!!!

[mbrookes]

@sedelgadof AFAIK, this was fixed in #12241.