TextField selection handles issue
Solved
QML and Qt Quick
-
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.
-
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 } }