Howto hide blinking cursor from InActive TextInput

pingal

I've a TextInput like below:

TextInput {
            id: num_id
            text: "1234"
            font.pixelSize: 20
            selectByMouse: true
            anchors.fill: parent
            validator: IntValidator {bottom: 1; top: 100000} 
        }

Everytime i enter something, cursor appears as expected. But I want to hide the cursor when i click outside TextInput.

lemons

You can simply catch all unhandled click events below your inputs.
Please note if you apply anchors.fill to the TextInput and the TapHandler has the same clickable area, all click events will stay in the TextInput as it covers the entire area of the TapHandler.
Compare to the example below with the Rectangle indicating the area of the TextInput.

Item{
    id: contentWrapper
    anchors.fill: parent

    TapHandler{
        id: clickOutsideCatcher
        onTapped: {
            console.debug("catched click outside")
            // this removes the active focus from the input field
            contentWrapper.forceActiveFocus()
        }
    }
    
    Rectangle{
        id: highlightTextInputArea
        anchors.fill: num_id
        color: "red"
    }

    TextInput {
        id: num_id
        text: "1234"
        font.pixelSize: 20
        selectByMouse: true
        //anchors.fill: parent
        validator: IntValidator {bottom: 1; top: 100000}
    }
}