QML: Mouse wheel event propagation in ListView

Question

Have strange situation with ListView scrolling on mouse wheel. Have Items structure similar to this:

MainAppWindow {

    // Some  zoomable map item
    Map {
        anchors.fill: parent
    }

    PopupMenu { // Simple Rectangle item
      anchors.top: parent.top
      width: 200
      height: parent.height / 2
      z: parent.z + 1

      ListView {
        anchors.fill: parent
        clip: true
        ...
        delegate: Item {
          ...
            MouseArea {
                anchors.fill: parent
                onClick: {
                    someHandler()
                }
            }
        }
      }
    }
}

ListView with vertical scroll works and scrolls just fine until it stops at bounds (top or bottom - whatever) and after this mouse event starts to propagate to underlying layer and ZoomableMap starts to zoom which is not we want: should be propagated there only if PopupMenu is not visible. Adding

                onWheel: wheel.accepted = true

into MouseArea inside ListView delegate could partially solve the problem - it disables wheel and allows scrolling only by dragging the content. However better allow scrolling by the wheel as well. MouseArea in PopupMenu blocks wheel and dragging in the ListView completely as well - not helps also.

So what is problem here, how to fix? Or we doing something wrong here?

Can you disable zooming/mouse interaction in ZoomableMap when PopupMenu::visible == true? (Need an id for the popup, of course.) Ideally ZoomableMap would have some property for that... in which case it's probably the simplest option. — Maxim Paperno
@MaximPaperno Yes, that could be the solution. Thanks! Need to add another MouseArea into ZoomableMap which blocks all mouse events and is disabled by default and enable it only if popup is visible. Ids exist of course. — Aleksey Kontsevich
Cool, sure will be easier than following the Flickable code... :-) Actually I don't see any API (or even hack) which would allow the flickable to keep "stealing" (grabbing) the mouse after it's done scrolling. — Maxim Paperno
You're kidding, QGC? What a hilarious coincidence! I'm very familiar with an old fork of it... :-) — Maxim Paperno

Aleksey Kontsevich Aleksey Kontsevich · Accepted Answer · 2019-11-21T15:47:50

Need to add another MouseArea into PopupMenu which blocks all mouse events and is disabled by default and enable it only if popup is visible (optional):

enabled: popupMenu.visible

MainAppWindow {

    // Some  zoomable map item
    Map {
        id: map
        anchors.fill: parent
    }

    PopupMenu { // Simple Rectangle item
        id: popupMenu
        anchors.top: parent.top
        width: 200
        height: parent.height / 2
        z: parent.z + 1

        MouseArea {
            id: mapMouseArea
            anchors.fill: parent
            enabled: popupMenu.visible
            preventStealing:true
            hoverEnabled:   true
            onWheel:        { wheel.accepted = true; }
            onPressed:      { mouse.accepted = true; }
            onReleased:     { mouse.accepted = true; }
        }

        ListView {
            anchors.fill: parent
            clip: true
            ...
            delegate: Item {
                ...
                MouseArea {
                    anchors.fill: parent
                    onClick: {
                        someHandler()
                    }
                }
            }
        }
    }
}

Note: however this solution does not work if ListView (or any other control) is a Map descendant item: item dragging causes map panning. To make it work need to make it at least sibling.

QML: Mouse wheel event propagation in ListView

1 Answers