Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-130371

Keyboard navigation focus in WebAssembly is half broken

    XMLWordPrintable

Details

    • Bug
    • Resolution: Fixed
    • P3: Somewhat important
    • 6.8.2, 6.9.0 FF
    • 6.8.0
    • Quick: Controls 2
    • None
    • Firefox 131.0.2, Brave 1.69.168 (Chromium 128)
    • WebAssembly
    • ef8bf4c2c (dev), 0c60d2c06 (6.8)

    Description

      If you run this very basic Qt application in browser with WebAssembly, you'll notice that keyboard navigation is very unusable compared to running natively on desktop:

      import QtQuick
      import QtQuick.Window
      import QtQuick.Layouts
      import QtQuick.Controls
      
      ApplicationWindow {
          id: root
      
          height: 150
          visible: true
          width: 640
      
          onActiveFocusControlChanged: {
              console.log("New focus: " + root.activeFocusControl);
          }
      
          component BounceAnim: SequentialAnimation {
              id: bounce_anim
              required property Item target
              // alwaysRunToEnd: true
              NumberAnimation {
                  target: bounce_anim.target
                  properties: "y"
                  to: -40
                  duration: 100
                  easing.type: Easing.OutCubic
              }
              NumberAnimation {
                  target: bounce_anim.target
                  properties: "y"
                  to: 0
                  duration: 300
                  easing.type: Easing.OutBounce
              }
          }
      
          Flickable {
              anchors.fill: parent
              contentWidth: column.width
              contentHeight: column.height
              clip: true
              ColumnLayout {
                  id: column
                  width: Math.max(300, root.width)
                  height: Math.max(150, root.height)
      
                  // padding: 20
                  spacing: 20
                  RowLayout {
                      Layout.margins: 20
                      spacing: 40
                      Layout.fillWidth: true
                      Label {
                          text: "Path"
                      }
                      TextField {
                          id: field
                          Layout.fillWidth: true
                          KeyNavigation.tab: ok
                      }
                  }
                  RowLayout {
                      Layout.margins: 20
                      Layout.alignment: Qt.AlignRight | Qt.AlignBottom
                      Button {
                          id: ok
                          text: "OK"
                          onClicked: {
                              console.log("Hello!!! " + field.text);
                              anim_ok.restart();
                          }
                          BounceAnim {
                              id: anim_ok
                              target: ok
                          }
                      }
                      Button {
                          id: cancel
                          text: "Cancel"
                          onClicked: {
                              console.log("Cancel!!!");
                              anim_cancel.restart();
                          }
                          BounceAnim {
                              id: anim_cancel
                              target: cancel
                          }
                      }
                  }
              }
          }
      }

      Open the Console in browser's developer tool and play around this basic program.

      Since KeyNavigation.tab: ok is set for the TextField, I expect pressing Tab following by Space should click the OK button, but it does not. It seems to require an additional Tab press before Space can click the Button.

      Further more, if I press Tab multiple times then occasionally the focus shifts to browser's own toolbar instead of following the natural order TextField -> OK -> Cancel.

      Attachments

        For Gerrit Dashboard: QTBUG-130371
        # Subject Branch Project Status CR V

        Activity

          People

            evenandersen Even Oscar Andersen
            jclink Jessia Clinkscale
            Votes:
            1 Vote for this issue
            Watchers:
            4 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved:

              Gerrit Reviews

                There are no open Gerrit changes