TextField and MouseArea



  • I have simple QML component where is text and textfield. Textfield should be editable when clicked it. But long pressing should do other operation. I tried to use MouseArea and propagateCompositeEvents but textfield is not activated for editing any more.

    Here is an example code:

    Rectangle {
      width: 200
      height: 50
      Text {
        anchors.fill: parent
        anchors.rightMargin: parent.width/2
        text: "Title"
      }
      TextField {
        id: textField
        anchors.fill: parent
        anchors.fill: parent
        anchors.leftMargin: parent.width/2
      }
      MouseArea {
        anchors.fill: parent
        propagateComposedEvents: true
        onClicked: { 
          mouse.accepted = false 
          textField.focus = true
          // textfield should be activated for editing...
        }
        onPressAndHold: {
           // do something....
        }
      }
    }
    

    Any ideas to fix this?



  • I am unable to reproduce the issue:

    import QtQuick 2.3
    import QtQuick.Controls 1.2
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        Rectangle {
          width: 200
          height: 50
          Text {
            anchors.fill: parent
            anchors.rightMargin: parent.width/2
            text: "Title"
          }
          TextField {
            id: textField
            anchors.fill: parent
            anchors.leftMargin: parent.width/2
          }
          MouseArea {
            anchors.fill: parent
            propagateComposedEvents: true
            onClicked: {
              mouse.accepted = false
              textField.focus = true
              // textfield should be activated for editing...
            }
            onPressAndHold: {
               console.log("LOL")
            }
          }
        }
    }
    

    The above code works for me as I assume you want it to work: a short click makes the text field editable, and a long click does something else. But a long click does not turn the field into a non-editable one once it's been made editable.

    If the issue is that your first click is a long click and does not make the field editable in addition to whatever else you want long clicks to do, then simply do for the long click the same as you're doing for the short click.



  • @johnsmith Thanks for testing. Sorry, my example was not completed. It indeed works using your example. But does not if component is inside the stackview page.

    Here is new example:

    import QtQuick 2.3
    import QtQuick.Controls 1.2
    import QtQuick.Layouts 1.1
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        StackView {
            anchors.fill: parent
            initialItem: page
        }
        Component {
            id: page
            Rectangle {
                width: 200
                height: 50
                Text {
                    anchors.fill: parent
                    anchors.rightMargin: parent.width/2
                    text: "Title"
                }
                TextField {
                    id: textField
                    anchors.top: parent.top
                    anchors.right: parent.right
                    width: parent.width/2
                }
                MouseArea {
                    anchors.fill: parent
                    propagateComposedEvents: true
                    onClicked: {
                        mouse.accepted = false
                        textField.focus = true
                        // textfield should be activated for editing...
                    }
                    onPressAndHold: {
                        console.log("LOL")
                    }
                }
            }
        }
    }
    


  • You can replace

    textField.focus = true
    

    with

    textField.forceActiveFocus()
    

    It will properly set the focus, but it will still doesn't act like without MouseArea.


  • Qt Champions 2016

    @johnsmith Your code will disable click to change cursor position.



  • @benlau But my code only adds an ApplicationWindow and a call to console.log()?



  • @johnsmith @benlau Thanks, now it works. Is it possible allow to change cursor position? I can't even calculate position because TextField doesn't contain postionAt() function...



  • @jimcad TextField has a cursorPosition property.


  • Qt Champions 2016

    @johnsmith ah yes, so the problem is on original code.


  • Qt Champions 2016

    @jimcad I write a custom MouseArea which will by pass any mouse event but it could still generate pressAndHold signal.

    That is my code:
    quickandroid/TextField.qml at master · benlau/quickandroid
    quickandroid/qamousesensor.cpp at master · benlau/quickandroid

    I also want to know is there any alternative way available..


Log in to reply
 

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