TextField and MouseArea

jimcad

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?

johnsmith

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.

jimcad

@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")
                }
            }
        }
    }
}

Brocan

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.

benlau

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

johnsmith

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

jimcad

@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...

johnsmith

@jimcad TextField has a cursorPosition property.

benlau

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

benlau

@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..