I have some little app

Window {
    width: 640; height: 480; visible: true; title: qsTr("Hello")

    Rectangle {
        color: "green"; width: 100; height: 20
        anchors.centerIn: parent

        TextField {
            anchors.fill: parent; anchors.margins: 2
        }

        MouseArea {
            anchors.fill: parent; propagateComposedEvents: true
            hoverEnabled: true
            onClicked: {
                mouse.accepted = false
            }
        }
    }
}

propagateComposedEvents set true When I clicked, cursor does not set to TextField. But if I click middle button all is ok. How can I propagate mouse click to TextField?

I have some little app

Window {
    width: 640; height: 480; visible: true; title: qsTr("Hello")

    Rectangle {
        color: "green"; width: 100; height: 20
        anchors.centerIn: parent

        TextField {
            anchors.fill: parent; anchors.margins: 2
        }

        MouseArea {
            anchors.fill: parent; propagateComposedEvents: true
            hoverEnabled: true
            onClicked: {
                mouse.accepted = false
            }
        }
    }
}

propagateComposedEvents set true When I clicked, cursor does not set to TextField. But if I click middle button all is ok. How can I propagate mouse click to TextField?

• qt
• qml

2 Answers 2

your Problem is that you are handling the wrong event in the mouse area. TextField gets focus on mouse pressed(!) not on mouse clicked. Therefor the correct solution is the following:

Window {
    width: 640; height: 480; visible: true; title: qsTr("Hello")

    Rectangle {
        color: "green"; width: 100; height: 20
        anchors.centerIn: parent

        TextField {
            anchors.fill: parent; anchors.margins: 2
        }

        MouseArea {
            anchors.fill: parent
            propagateComposedEvents: true
            hoverEnabled: true

            onClicked: event => {
                // error: textfield gets focus on press not on clicked!
                event.accepted = false
                console.log("clicky")
            }
            onPressed: event => {
                // correct: set the press event to accepted false to propergate it to the textfield!
                event.accepted = false
                console.log("pressed event accepted false")
            }
        }
    }
}

No need for MouseArea. You can set selectByMouse to true. You can also set hoverEnabled on TextField.

TextField {
    id: textField
    anchors.centerIn: parent
    background: Rectangle {
        border.color: textField.hovered || textField.activeFocus ? "green" : "lightgrey"
        border.width: 1
    }
    implicitWidth: 100
    hoverEnabled: true
    selectByMouse: true
}

You can Try it Online!