Using TextInput to toggle the virtualKeyboard

RobM

This might be hard for me to explain but I will try. First have a look at my code so you can get an idea of what it does I am sure it seems rather simple.

main.qml:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.VirtualKeyboard 2.4
import QtQuick.Controls 2.5

Window {
    id: window
    visible: true
    width: 640
    height: 480

    TextInput{
        id:inputItem
        anchors.centerIn: parent
        height: 55
        width: 120
        text: "Enter text here"

        onActiveFocusChanged: {
            if(activeFocus) inputPanelContainer.textDisplay = inputItem.text
        }

        onDisplayTextChanged: {
            inputPanelContainer.textDisplay = text
        }
    }

    InputPanelContainer {
        id: inputPanelContainer
        x: 0
        y: window.height
    }
}

InputPanelContainer.qml:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.VirtualKeyboard 2.4
import QtQuick.Controls 2.5

Item{
    id:inputPanelContainer
    z: 99
    width: window.width
    height: childrenRect.height
    
    property string textDisplay:""
    
    Rectangle{
        anchors.top: parent.top
        width: parent.width
        height: startText.height
        color: "lightgrey"
    }
    
    Text{
        id:startText
        text:inputPanelContainer.textDisplay
        anchors{
            top:parent.top
            horizontalCenter: parent.horizontalCenter
        }
    }
    
    InputPanel {
        id: inputPanel
        z: 99
        x: 0
        anchors.top: startText.bottom
        width: inputPanelContainer.width
        
        states: State {
            name: "visible"
            when: inputPanel.active
            PropertyChanges {
                target: inputPanelContainer
                y: window.height - inputPanelContainer.height
            }
        }
        
        transitions: Transition {
            from: ""
            to: "visible"
            reversible: true
            ParallelAnimation {
                NumberAnimation {
                    properties: "y"
                    duration: 250
                    easing.type: Easing.InOutQuad
                }
            }
        }
    }
}

So as you can see I have a basic TextInput and when the user clicks the TextInput field they can use the virtualKeyboard to alter said text. Also, this text is displayed on the Keyboard (or above the keyboard) in real time so they can see what they are doing in the event that the TextInput field gets covered.

The problem is I never want the user to be able to choose the cursor location. I would rather have the TextInput act more like a button. I tried achieving this with the selectAll() function:

onActiveFocusChanged: {
            selectAll()
            if(activeFocus) inputPanelContainer.textDisplay = inputItem.text
        }

and this works great the first time the user clicks the TextInput field but for some reason it only works the first time. Any subsequent click of the TextInput field and it no longer selects the entire string. So is their another feature I could use ( I tried a few, like button) that will work or is there a way to use selectAll() such that any time the user clicks the TextInput field the entire string is highlighted.

Essentially, I am trying to eliminate this cursor placement feature because I know my users wont have a mouse they will only have their finger and trying to place the exact location of the cursor with a finger will be a struggle for anyone who doesn't have skinny fingers.

EDIT: I managed to get something that forces it to work like I want but it's a bit of a work around. By using a button I can call inputItem.forceActiveFocus onclicked(). It will place the cursor at the end of the string that is to be edited if I keep it visible and if it is set to not visible then it's a non-issue but surely there is a better way?