Topic: Chrome error when clicking MDBBtnFixed

duckjones free asked 4 years ago


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>
    );
}

Jakub Chmura staff answered 4 years ago


Hi @duckjones,

Thank you very much for the founded bugs!

We will try to fix it as soon as possible.

Best Regards, Kuba



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.26.1
  • Device: iMac
  • Browser: Chrome
  • OS: Max OSX
  • Provided sample code: No
  • Provided link: Yes