QML Virtual keyboard Hide button not working - qt

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.

Answer 1

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
}

Answer 2

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
}