Expected behavior I'm using the "Fixed Buttons" example on https://mdbootstrap.com/docs/react/components/buttons/ to build a mobile page. For obvious reasons, mouse events are a no-go for mobile pages, so I adapted the code to change the MDBBtnFixedItems' style changes for the onClick event of the parent MDBBtnFixedItem. The expected behavior would be for the child buttons to show/hide based on their style changes when the state update occurs.

Actual behavior I discovered that any time an MDBBtnFixed component has child components, the onClick event produces the following error in the Chrome console and the event handler never executes:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

Resources (screenshots, code snippets etc.) Here's the code from the sample that I've adapted, everything else is essentially the same as in the link above:

onFixedButtonClick = () => {
    this.setState(state => {
        if (state.buttonsShowing) {
            return {
                buttonsShowing: false,
                buttonStyle: {
                    transform: "scaleY(0.4) scaleX(0.4) translateY(40px) translateX(0)",
                    opacity: "0"
                }
            }
        }
        return {
            buttonsShowing: true,
            buttonStyle: {
                transform: "scaleY(1) scaleX(1) translateY(0) translateX(0)",
                opacity: "1"
            }
        }
    });
}

render() {
    return (
        <section className="h-100">
            <MDBBtnFixed floating size="lg" color="red" icon="plus" style={{ bottom: '45px', right: '24px' }} onClick={this.onFixedButtonClick}>
                <MDBBtnFixedItem buttonStyle={this.state.buttonStyle} color="green" icon="envelope" />
            </MDBBtnFixed>
        </section>
    );
}