MouseArea stole QML element's mouse events

If I put a MouseArea on a QML element, then MouseArea will steal all mouse events. Thus, TextEdit will be uneditable and unselectable.

TextEdit {
    // some properties
    MouseArea {
        // some properties
        onClicked: { /* do something */ }
    }
}

Is there a way to solve it?

By the way, if I put a large MouseArea on another MouseArea, larger MouseArea will steal all mouse events. How do I solved it? I think passing on mouse events manually can solve that, but how to do it?

You have to enable the MouseArea to propagate the composed events like clicked or released to the underneath component, as described by @Torgeirl's answer.

If you want your TextEdit, Slider or CheckBox to receive these kind of events, simply pass through the event by setting its accepted property to false.

Sample code:

RowLayout {
    TextEdit { text: "Hi" }
    Slider {}
    CheckBox { text: "CheckBox"}

    MouseArea {
        anchors.fill: parent
        propagateComposedEvents: true

        onClicked: mouse.accepted = false;
        onPressed: mouse.accepted = false;
        onReleased: mouse.accepted = false;
        onDoubleClicked: mouse.accepted = false;
        onPositionChanged: mouse.accepted = false;
        onPressAndHold: mouse.accepted = false;
    }
}