QML Drag breaks when switching pressed button

Tobias · 9 Feb 2021, 09:40

Hi,
we run into the problem that dragging in QML can get stuck when the user switches the pressed mouse button while dragging.
I attached a minimal example which is basically the example given in the documentation documentation.

Start drag with left mouse button
Press right mouse button in addition to the left one
Release left mouse button (right button stays pressed)
The yellow rectangle snaps back to its original position, as expected
Continue dragging whit only the right mouse button pressed
That any dragging is happening is in our opinion already a bug as only Qt.LeftButton is accepted
Release the right mouse button
The yellow rectangle stays (most times) where it was last dragged
This creates problems for us as our users start to destroy the UI on accident (and on purpose)
To fix the yellows rectangles position start a new drag within the green area

Is anyone able to confirm that behavior?
And/or is able to hint for a solution to that problem?

Cheers
Tobi

We are using Qt5.12.11

import QtQuick 2.5

Rectangle {
  id: rootDialog

  anchors.fill: parent
  anchors.margins: 5
  border.width: 1
  color: "#11ffffff"

  Rectangle {
    id: root
    color: "green"

    property string colorKey: "yellow"

    width: 64; height: 64

    MouseArea {
      id: mouseArea

      width: 64; height: 64
      anchors.centerIn: parent

      drag.target: tile

      onReleased: parent = tile.Drag.target !== null ? tile.Drag.target : root

      acceptedButtons: Qt.LeftButton //we only want the dragging to happen with the left mouse button

      Rectangle {
        id: tile

        width: 64; height: 64
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter

        color: root.colorKey

        Drag.keys: [ root.colorKey ]
        Drag.active: mouseArea.drag.active
        Drag.hotSpot.x: 32
        Drag.hotSpot.y: 32
        states: State {
            when: mouseArea.drag.active
            ParentChange { target: tile; parent: root }
            AnchorChanges { target: tile; anchors.verticalCenter: undefined; anchors.horizontalCenter: undefined }
        } //states
      } //Rectangle
    } //MouseArea
  } //Rectangle
} //Rectangle