QML Virtual keyboard Hide button not working

Question

I am having a problem if I click on keyboard hide button .Following is the code :

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.VirtualKeyboard 2.2

Window {
    visible: true
    width: 600
    height: 500
    title: qsTr("Hello World")

    TextField {
        id: textfield
        anchors.bottom:(inputPanel.visible) ? inputPanel.top : parent.bottom
        color: "#2B2C2E"
        cursorVisible: activeFocus
        selectionColor: Qt.rgba(0.0, 0.0, 0.0, 0.15)
        selectedTextColor: color
    }

    InputPanel {
        id: inputPanel
        z: 89
        anchors.bottom:parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right

        visible: Qt.inputMethod.visible //** Warning here 

    }
}

Below are the use-cases:

If i click on TextField keyboard pops as expected but when I click on hide keyboard button it's not hiding.
If i click on TextField keyboard pops as expected, next if I double-click on TextField and then click on hide keyboard button it's hiding.

I am also getting a warning as :

QML InputPanel: Binding loop detected for property "visible"

Please suggest.

I'm having a similar problem without the error message (though I don't have that visibility binding in), but I am already using TextInput and it doesn't matter if I double-click beforehand, it just doesn't work. I'm following the example in Mitch's answer below. The "OnActiveChanged" event is not being hit, so setting `visible: active` would not work. (The button is not setting active to false)... It's like the "Hide" button is just doing nothing. so any further possible solutions would be great. — komodosp, Feb 17 '21 at 22:21

score 2 · Answer 1 · answered Aug 20 '17 at 17:32

The basic example shows the input panel when its active property is true:

InputPanel {
    id: inputPanel
    z: 89
    y: appContainer.height
    anchors.left: parent.left
    anchors.right: parent.right
    states: State {
        name: "visible"
        /*  The visibility of the InputPanel can be bound to the Qt.inputMethod.visible property,
            but then the handwriting input panel and the keyboard input panel can be visible
            at the same time. Here the visibility is bound to InputPanel.active property instead,
            which allows the handwriting panel to control the visibility when necessary.
        */
        when: inputPanel.active
        PropertyChanges {
            target: inputPanel
            y: appContainer.height - inputPanel.height
        }
    }
    transitions: Transition {
        id: inputPanelTransition
        from: ""
        to: "visible"
        reversible: true
        enabled: !VirtualKeyboardSettings.fullScreenMode
        ParallelAnimation {
            NumberAnimation {
                properties: "y"
                duration: 250
                easing.type: Easing.InOutQuad
            }
        }
    }
    Binding {
        target: InputContext
        property: "animating"
        value: inputPanelTransition.running
    }
}

So you could do something similar:

InputPanel {
    id: inputPanel
    z: 89
    anchors.bottom:parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right

    visible: active
}

Thanks for the suggestion and I did the same but it didn't work the main reason that i used `Qt.inputMethod.visible` because it is suggested in the example and i think there is a bug on 'TextField`. I found an alternative and i have posted below. — pra7, Aug 21 '17 at 13:42

score 0 · Accepted Answer · answered Aug 21 '17 at 13:46

I don't know what was the issue but when I added the TextField inside TextInput everything started to work,Below is the code :

TextInput {
    width:300
    height:50
    id: textfield
    anchors.bottom:(inputPanel.visible) ? inputPanel.top : parent.bottom
    color: "#2B2C2E"           

    TextField{
        width:parent.width
        height:parent.height
    }

QML Virtual keyboard Hide button not working

2 Answers2

Linked