Show VirtualKeyboard in Dialog

Question

I am using qtvirtualkeyboard module with qml. I use the following qml code to show the virtual keyboard.

import QtQuick 2.5
import QtQuick.VirtualKeyboard 2.1

    InputPanel {
        id: inputPanel
        y: Qt.inputMethod.visible ? parent.height - inputPanel.height : parent.height
        anchors.left: parent.left
        anchors.right: parent.right
        focus: true
    }

When I call that qml in a dialog with modal configuration as true, I can't touch the keyboard. If the dialog modal configuration is false then I can touch keyboard but this time the dialog is hidden. Also I want that the user can control only keyboard on dialog screen.

How can I control virtual keyboard on dialog screen?

Answer 1

If I understood the problem correctly, then this is likely the same issue as QTBUG-56918. As mentioned by JP in the comments of that bug report, a possible workaround (for Qt Quick Controls 2 applications) is to set parent: root.overlay and z: 1 on the InputPanel to raise it above the popup (or dialog).

Answer 2

set following property for InputPanel:

z: 1
parent: Overlay.overlay
focus: true

and set following property for Popup:

modal: false
focus: true

Answer 3

Making the keyboard a child of the dialog gives you stress if you want a reusable solution for several different dialogs. My workaround was therefore to use a nonmodal dialog with a MouseArea behind it, which can be instantiated and used as a dialog (but use the aliased properties instead of Item's):

ModalDialog.qml:

Item {
  anchors.fill: parent
  property alias title: dialog.title
  property alias _x: dialog.x
  property alias _y: dialog.y
  property alias _width: dialog.width
  property alias _height: dialog.height
  property alias closePolicy: dialog.closePolicy
  property alias standardButtons: dialog.standardButtons
  default property alias contentData: dialog.contentData
  property alias _visible: dialog.visible
  visible: _visible
  function open() { dialog.open() }

  Dialog {
    id: dialog
  }
  MouseArea {
    anchors.fill: parent
    z: 100
  }
  Rectangle {
    anchors.fill: parent
    color: "black"
    opacity: dialog.opacity / 2
    z: 100
  }
}