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

MouseArea inside of SpinBox contentItem is blocking hovered property

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Open
    • Priority: P2: Important
    • Resolution: Unresolved
    • Affects Version/s: 6.3
    • Fix Version/s: None
    • Component/s: Quick: Controls 2
    • Labels:
      None

      Description

      The example code is a bit cluttered, but it needs to use the template SpinBox in order to be able to add a MouseArea inside the TextInput contentItem.
      The issue is that this example works as expected with Qt 6.2.0-beta1 (2021-07-05 sha1: e3e388d76cf397282e2934705a681852b6e528ff) currently available from the maintenance tool. If you hover on top of the SpinBox input it will output the hovered property as true in the console.
      When building the same example with Qt build with the current dev branch (2021-07-27 sha1: 4180e9c5111faae9b242253e2ab215154174507d) it won't work anymore. Hovering over the SpinBox input will output the hovered property as false. Only when hovering on top of the up/down indicator will it be true.

      Is this a bug or intended?

      import QtQuick 2.15
      import QtQuick.Controls 2.15
      import QtQuick.Templates 2.15 as T
      import QtQuick.Window 2.15
      
      Window {
          width: 640
          height: 480
          visible: true
          title: qsTr("Hello World")
      
          T.SpinBox {
              id: mySpinBox
      
              hoverEnabled: true
              onHoveredChanged: console.log("SpinBox hovered", mySpinBox.hovered)
      
              implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                                      contentItem.implicitWidth + 2 * padding +
                                      up.implicitIndicatorWidth +
                                      down.implicitIndicatorWidth)
              implicitHeight: Math.max(implicitContentHeight + topPadding + bottomPadding,
                                       implicitBackgroundHeight,
                                       up.implicitIndicatorHeight,
                                       down.implicitIndicatorHeight)
      
              padding: 6
              leftPadding: padding + (mySpinBox.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0))
              rightPadding: padding + (mySpinBox.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0))
      
              validator: IntValidator {
                  locale: mySpinBox.locale.name
                  bottom: Math.min(mySpinBox.from, mySpinBox.to)
                  top: Math.max(mySpinBox.from, mySpinBox.to)
              }
      
              contentItem: TextInput {
                  z: 2
                  text: mySpinBox.displayText
      
                  font: mySpinBox.font
                  color: mySpinBox.palette.text
                  selectionColor: mySpinBox.palette.highlight
                  selectedTextColor: mySpinBox.palette.highlightedText
                  horizontalAlignment: Qt.AlignHCenter
                  verticalAlignment: Qt.AlignVCenter
      
                  readOnly: !mySpinBox.editable
                  validator: mySpinBox.validator
                  inputMethodHints: mySpinBox.inputMethodHints
      
                  MouseArea {
                      anchors.fill: parent
                      enabled: true
                      hoverEnabled: true
                      propagateComposedEvents: true
                      acceptedButtons: Qt.LeftButton
                      cursorShape: Qt.PointingHandCursor
                  }
      
                  Rectangle {
                      x: -6 - (mySpinBox.down.indicator ? 1 : 0)
                      y: -6
                      width: mySpinBox.width - (mySpinBox.up.indicator ? mySpinBox.up.indicator.width - 1 : 0) - (mySpinBox.down.indicator ? mySpinBox.down.indicator.width - 1 : 0)
                      height: mySpinBox.height
                      visible: mySpinBox.activeFocus
                      color: "transparent"
                      border.color: mySpinBox.palette.highlight
                      border.width: 2
                  }
              }
      
              up.indicator: Rectangle {
                  x: mySpinBox.mirrored ? 0 : parent.width - width
                  height: parent.height
                  implicitWidth: 40
                  implicitHeight: 40
                  color: mySpinBox.up.pressed ? mySpinBox.palette.mid : mySpinBox.palette.button
      
                  Rectangle {
                      x: (parent.width - width) / 2
                      y: (parent.height - height) / 2
                      width: parent.width / 3
                      height: 2
                      color: enabled ? mySpinBox.palette.buttonText : mySpinBox.palette.mid
                  }
                  Rectangle {
                      x: (parent.width - width) / 2
                      y: (parent.height - height) / 2
                      width: 2
                      height: parent.width / 3
                      color: enabled ? mySpinBox.palette.buttonText : mySpinBox.palette.mid
                  }
              }
      
              down.indicator: Rectangle {
                  x: mySpinBox.mirrored ? parent.width - width : 0
                  height: parent.height
                  implicitWidth: 40
                  implicitHeight: 40
                  color: mySpinBox.down.pressed ? mySpinBox.palette.mid : mySpinBox.palette.button
      
                  Rectangle {
                      x: (parent.width - width) / 2
                      y: (parent.height - height) / 2
                      width: parent.width / 3
                      height: 2
                      color: enabled ? mySpinBox.palette.buttonText : mySpinBox.palette.mid
                  }
              }
      
              background: Rectangle {
                  implicitWidth: 140
                  color: enabled ? mySpinBox.palette.base : mySpinBox.palette.button
                  border.color: mySpinBox.palette.button
              }
          }
      }
      

      This also applies to Buttons. The following code outputs "hovered" when hovering over the Button and compiled with Qt 5.15.5, but isn't outputting anything when compiled with Qt 6.2.0.

      import QtQuick 2.15
      import QtQuick.Controls 2.15
      import QtQuick.Window 2.15
      
      Window {
          width: 640
          height: 480
          visible: true
          title: qsTr("Hello World")
      
          Button {
              text: "Button"
              onPressed: console.log("pressed", pressed)
              onHoveredChanged: console.log("hovered", hovered)
      
              MouseArea {
                  anchors.fill: parent
                  hoverEnabled: true
                  acceptedButtons: Qt.NoButton
              }
          }
      }
      

        Attachments

          Issue Links

          No reviews matched the request. Check your Options in the drop-down menu of this sections header.

            Activity

              People

              Assignee:
              qt.team.quick.subscriptions Qt Quick and Widgets Team
              Reporter:
              henning Henning Gr√ľndl
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Dates

                Created:
                Updated:

                  Gerrit Reviews

                  There are no open Gerrit changes