TextField selection handles issue

Deedss · wrote on 3 Dec 2019, 15:18

Hello,

I'm trying to get the QtVirtualKeyboard to work with my application and it opens in a new dialog. This all functions normally until I select the text in the TextField.
The selectionhandlers cross over in the Virtual Keyboard and I can't figure out how to fix it. And it seems that my textField is super big for some reason hence the selectionhandlers being under the keyboard.

/***************************************************************************
    *   ContentItem
    ***************************************************************************/
    contentItem: ColumnLayout{
        id: root_Column
        width: parent.width
        height: parent.height - footer_Rect.height - header_Rect.height

        TextField{
            id: root_TextField
            anchors.fill: parent

            // Layouts
            Layout.preferredHeight: 50
            Layout.maximumHeight: 50
            Layout.preferredWidth: parent.width / 2
            Layout.alignment: Qt.AlignHCenter

            // inputs
            text: inputText
            placeholderText: ""
            inputMethodHints: inputTypeMethod
            validator: validatorText

            focus: active
            selectByMouse: true

            onAccepted: {
                if(text !== ""){
                    returnValue = text
                    root.accepted()
                } else {
                    if (sender == "searchTextField") {
                        returnValue = text
                        root.accepted()
                    } else {
                        placeholderText = "Value required"
                        focus = true
                    }
                }
            }
            onFocusChanged: {
                selectAll()
                focus = true
            }
            onTextChanged: {
                background.color = text === inputText ? "#ffffff" : "#ffff00"
            }
        }

        InputPanel {
            id: root_InputPanel
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignBottom
            onFocusChanged: {
                root_TextField.focus = true
            }
        }
    }

I've tried different setups using Items or Rectangles as the contentItem and without a contentItem at all. But still no succes.

manny_lp · wrote on 4 Dec 2019, 05:57

Is there any reason why you are giving "anchors.fill: parent" for your TextField ?

Can you share the complete pop-up code?

Deedss · wrote on 4 Dec 2019, 06:56

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
import QtQuick.VirtualKeyboard 2.2
import QtQuick.VirtualKeyboard.Settings 2.2
import QtQuick.VirtualKeyboard.Styles 2.2
import "qrc:/QmlFiles/Components"

/*******************************************************************************
*   Summary:
*
*   The InputPanel is used as a standard format.
*   Its basic function is to prevent duplicated code.
*
*******************************************************************************/
Dialog {
    id: root
    modal: true
    focus: active
    closePolicy: "NoAutoClose"

    width: appWindow.width / 1.5
    height: appWindow.height / 1.6

    onAccepted: {
        returnValue = root_TextField.text
        root.close()
    }

/*******************************************************************************
*   Custom Properties
*******************************************************************************/
    // Dialog/Components properties
    property Dialog dialog                  : root
    property TextField textField            : root_TextField
    // Set name of sender
    property string sender                  : ""

    // set values of textfields
    property alias inputTypeMethod          : root_TextField.inputMethodHints
    property string inputText               : root_TextField.text
    property alias validatorText            : root_TextField.validator

    // Set values of label
    property string labelText                : root_Label.text

    // return value to read
    property string returnValue             : ""

/*******************************************************************************
*   Components
*******************************************************************************/
    background: Rectangle {
        anchors.fill: parent
        border.width: 3

        color: "#303030"
    }
    /***************************************************************************
    *   Header
    ***************************************************************************/
    header: Rectangle {
        id: header_Rect
        width: parent.width
        height: parent.height / 10              // 40
        border.width: 2
        color: "#202020"

        Label {
            id: root_Label
            text: labelText
            color: "white"
            font.pixelSize: 20
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }

    /***************************************************************************
    *   ContentItem
    ***************************************************************************/
    contentItem: ColumnLayout{
        id: root_Column
        width: parent.width
        height: parent.height - footer_Rect.height - header_Rect.height

        TextField{
            id: root_TextField

            // Layouts
            Layout.preferredHeight: 50
            Layout.maximumHeight: 50
            Layout.preferredWidth: parent.width / 2
            Layout.alignment: Qt.AlignHCenter

            // inputs
            text: inputText
            placeholderText: ""
            inputMethodHints: inputTypeMethod
            validator: validatorText

            focus: active
            selectByMouse: true

            onAccepted: {
                if(text !== ""){
                    returnValue = text
                    root.accepted()
                } else {
                    if (sender == "searchTextField") {
                        returnValue = text
                        root.accepted()
                    } else {
                        placeholderText = "Value required"
                        focus = true
                    }
                }
            }
            onFocusChanged: {
                selectAll()
                focus = true
            }
            onTextChanged: {
                background.color = text === inputText ? "#ffffff" : "#ffff00"
            }
        }

        InputPanel {
            id: root_InputPanel
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignBottom
            onFocusChanged: {
                root_TextField.focus = true
            }
        }
    }
    /***************************************************************************
    *   Footer
    ***************************************************************************/
    footer: RowLayout {
        id: footer_Rect
        spacing: 0

        Button {
            id: root_OkBtn
            // Layout
            Layout.preferredWidth: parent.parent.width / 2

            font.pointSize: 16
            text: "Ok"
            onClicked: {
                root.accepted()
            }
            Component.onCompleted: {
                canEnlarge = false
            }
        }

        Button {
            id: root_CancelBtn
            // Layout
            Layout.preferredWidth: parent.parent.width / 2

            font.pointSize: 16
            text: "Cancel"
            onClicked: {
                root.close()
            }
            Component.onCompleted: {
                canEnlarge = false
            }
        }
    }

    Component.onCompleted: {
        root_TextField.focus = true
    }
}

Deedss · wrote on 5 Dec 2019, 07:12

Was able to solve it by outcommenting selectionHandle in the custom keyboard style.qml file.