QML textInput how to handle selection and escape - qt

Question

I am building a QML application and I have a TextInput component as follows:
TextInput {
id: editableTextInput
text: styleData.value
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
selectionColor: 'darkgray'
selectedTextColor: 'white'
font.pixelSize: 14
font.family: "AvantGarde-Medium"
onEditingFinished: {
// TO DO: Handle new text
}
MouseArea {
anchors.fill: parent
onClicked: {
editableTextInput.selectAll()
}
}
}
At the moment, the way it stands is when the user clicks on the text, it selects the whole text and then I can start typing and the whole text will be replaced but I want the user to give a bit more finer control. For one, initially the user selects the full text and then if they click again, it should basically put the cursor at the current position. Also, the escape key should basically restore the old text and cancel the whole operation.
These are standard ways for text input. I was wondering if I have to program all of this explicitly or is there a way to get this behaviour with the TextInput control.

Answer 1

Basically, you don't need to use MouseArea for this. Hook activeFocus to decide when to select the text (on initial click, activeFocus will become true), store the old text, and restore it when editing is finished if escape was pressed.
I think this gets you a good part of the way to what you want:
import QtQuick 2.6
TextInput {
text: "Hello world!" + index
font.pixelSize: 24
width: 300
height: 30
// Store the previous text for restoring it if we cancel
property string oldText
// Lets us know that the user is cancelling the save
property bool cancelling
Keys.onEscapePressed: {
// Cancel the save, and deselect the text input
cancelling = true
focus = false
}
onEditingFinished: {
if (cancelling) {
// When cancelling, restore the old text, and clear state.
text = oldText
oldText = ""
cancelling = false
} else {
// TO DO: Handle new text
}
}
onActiveFocusChanged: {
// When we first gain focus, save the old text and select everything for clearing.
if (activeFocus) {
oldText = text
selectAll()
}
}
}