WebView breaks TextField



  • I have an interesting problem that only seems to occur on Android for Qt 5.8 and up. I have a TextField and a WebView on the same page. If I turn the visibility of the WebView from false to true, it becomes impossible to get the focus into the TextField to enter text. The android keyboard refuses to show up as well as the blinking cursor.

    In 5.7 it works fine, but I've tested 5.8, 5.9, 5.10 and 5.11 and they all have this issue. iOS does not have this issue, and neither does Linux or Windows. I've tried using other versions for QtQuick and QtQuick.Controls depending on the Qt version, but it made no difference.

    Has anyone seen something like this? Do you have any ideas for a workaround? Instead of setting visibility to false, I've tried setting width and height to 0, but that didn't hide the WebView. Also tried setting opacity to 0, but that also didn't hide the WebView. For my application it is important that I am able to hide the WebView.

    Below is a simple example that can be used to replicate the issue. At first you can tap on the TextField and the android keyboard will show up and you can input text. However, if you then press the "Hide" button followed by the "Show" button, you will not be able to tap on the TextField anymore and enter text (for Qt >= 5.8).

    import QtQuick 2.7
    import QtQuick.Window 2.2
    import QtWebView 1.1
    import QtQuick.Controls 2.0
    
    ApplicationWindow {
        id: root
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
        header: Row {
            Button {
                text: "Hide"
                height: 100
                onClicked: {
                    webview.visible = false
                }
            }
            Button {
                text: "Show"
                height: 100
                onClicked: {
                    webview.visible = true
                }
            }
        }
    
        TextField {
            id: textfield
            x: 0
            width: 100
            height: parent.height
        }
    
        WebView {
            id: webview
            url: "http://www.google.com"
            width: parent.width - textfield.width
            x: textfield.width
            height: parent.height
        }
    }