Qml Combobox not closing when delegate of the listview goes out of scope

Viewed 532

I have made a delegate for listview that contains Combobox. If I open the Combobox and scroll the listview, the Combobox popup is moving with the delegate position, that's ok. But when the delegate goes out of the listview area(Ref the sample image attached), Combobox popup continues to moves even out of the listview area.

How to close the Combobox when the corresponding delegate goes out of the listview area.

Thanks in advance...

Code goes here

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Column {
        spacing: 0
        anchors.fill: parent
        Item {
            width: parent.width
            height: parent.height * 0.4
            Image {
                anchors.fill: parent
                anchors.margins: 10
                source: "https://lh4.googleusercontent.com/proxy/cITVCAj9KJ5Hfwd5iuNDhzdB2pSrMQv2rzTl-vvg23Ifhe2qdCisZBG-MzV35y_r2zijC9X4QOpda9eHzr_hA"
            }
        }
        ListView {
            width: parent.width
            height: parent.height * 0.7
            model: 10
            spacing: 5
            clip: true
            delegate: Rectangle {
                width: parent.width
                height: 50
                color: index % 2 == 0 ? "lightsteelblue" : "steelblue"
                Row {
                    spacing: 25
                    anchors.centerIn: parent
                    Label {
                        text: qsTr("%1").arg(index)
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    ComboBox {
                        anchors.verticalCenter: parent.verticalCenter
                        model: ["a", "b", "c"]
                    }
                }
            }
        }
    }
} 

popup_goes_outofarea_sample

1 Answers

If there is no particular goal to keep ComboBox popup opened when scrolling, then add the following property to your ListView:

highlightRangeMode: ListView.StrictlyEnforceRange

This will close ComboBox popup when ListView is being scrolled.

P.S.

Also, resolves your issue with the ComboBox list getting out of view area.

UPDATE on issue with header element hiding below other list items:

Accordingly to the description ListView.StrictlyEnforceRange - the highlight never moves outside of the range. The current item changes if a keyboard or mouse action would cause the highlight to move outside of the range. when an item goes out of range the list changes next item and that makes ComboBox closing its popup, but since header item is below the other ListView items itself (see this paragraph https://doc.qt.io/qt-5/qml-qtquick-listview.html#stacking-order-in-listview , delegate is always above a header) it makes impossible displaying default header here at the top of the other items. I'd suggest you implement your own header beyond the list. Sorry, I might not have known Qt so good to find the other solution.

Related