[Solved] Focus handling: MouseArea over a TextInput



  • I want the to handle the focus like this:
    When I first click on an item, I want to highlight its "background". When I click on it the second time, I want to set the focus on the text so that I can enter values or select the text.

    This is what my items look like:
    @
    Rectangle {
    id: rect
    width: 100
    height: 62
    color: activeFocus ? "red" : "grey"

        TextInput {
            id: text_input1
            x: 0
            y: 0
            width: 100
            height: 62
            text: qsTr("text")
            activeFocusOnPress: false
            selectByMouse: true
            font.pixelSize: 16
        }
    
        MouseArea {
            id: mouse_area1
            anchors.fill: text_input1
            acceptedButtons: Qt.LeftButton | Qt.RightButton
            onPressed: {
                if (mouse.button == Qt.LeftButton)
                {
                    if(parent.activeFocus == true)
                    {
                        text_input1.focus = true
                        text_input1.cursorPosition = text_input1.positionAt(mouseX)
                    }
                    else if (text_input1.activeFocus == false)
                    {
                        parent.focus = true
                    }
                }
            }
    
            hoverEnabled: true
            onHoveredChanged: console.log("hover")
        }
    }
    

    @

    So when the item is clicked the first time, the Rectangle gets the focus and changes its color to red. When I click it the second time, the TextInput has the focus. I can then edit the text. So far everything works how I expect it.
    Now I want to select some text with the mouse. This is not working and I don't know what I'm doing wrong. I think that the problem is the MouseArea? As soon as I remove it, the selection is working again. But without it, the focus handling is not working as I want it to work.

    Does anybody have an idea how to solve this problem? Thank you!



  • this is how I solved it:
    I had to disable the MouseArea to select the text.
    @
    Rectangle {
    id: rect
    width: 100
    height: 62
    color: activeFocus ? "red" : "grey"

        TextInput {
            id: text_input1
            width: parent.width
            height: parent.height
            text: qsTr("text")
            selectedTextColor: "#ee1c1c"
            activeFocusOnPress: false
            selectByMouse: true
            font.pixelSize: 16
            onFocusChanged:
            {
                mouse_area1.enabled = !text_input1.focus
            }
        }
    
        MouseArea {
            id: mouse_area1
            anchors.fill: text_input1
            acceptedButtons: Qt.LeftButton | Qt.RightButton
            onPressed: {
                if (mouse.button == Qt.LeftButton)
                {
                    if(parent.activeFocus == true)
                    {
                        text_input1.focus = true
                        text_input1.cursorPosition = text_input1.positionAt(mouseX)
                    }
                    else if (text_input1.activeFocus == false)
                    {
                        parent.focus = true
                    }
                }
            }
        }
    }
    

    @


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.