Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

TextField selection handles issue



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

    7420dbcd-94d4-415d-b74f-2be60acfbbd8-afbeelding.png

    /***************************************************************************
        *   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.



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

    Can you share the complete pop-up code?



  • 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
        }
    }
    
    
    
    


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