QML: Elements bouncing in customized ComboBox on mouse cursor

Question

My task is to make ComboBox with images. I have tried to implement ComboBox customization from Qt documentation. It's works well, but when you point an element with mouse cursor it bouncing horizontally. I want it static look. Here is my implementation:

ComboBox {
                Component.onCompleted: {
                    //Some actions with index here
                }

                id: languageComboBox

                contentItem: Image {
                    id: countryFlag

                    anchors.left: parent.left
                    anchors.leftMargin: 5
                    horizontalAlignment: Image.AlignLeft
                    smooth: false
                    antialiasing: false
                    sourceSize: Qt.size(40, 20)
                    fillMode: Image.Pad
                }


                delegate: ItemDelegate {
                    contentItem: Image {
                        id: currentFlag

                        anchors.left: parent.left
                        anchors.leftMargin: 5
                        horizontalAlignment: Image.AlignLeft
                        sourceSize: Qt.size(40, 20)
                        smooth: false
                        antialiasing: false
                        opacity: 1.0
                        fillMode: Image.Pad
                        source: imgSource
                    }
                    highlighted: languageComboBox.highlightedIndex === index
                }

                popup: Popup {
                    y: languageComboBox.height - 1
                    width: languageComboBox.width
                    implicitHeight: contentItem.implicitHeight
                    padding: 1

                    contentItem: ListView {
                        implicitHeight: contentHeight
                        clip: true
                        model: languageComboBox.popup.visible ? languageComboBox.delegateModel : null
                        currentIndex: languageComboBox.highlightedIndex
                        boundsBehavior: Flickable.StopAtBounds

                    }
                }
                model: ListModel {
                    // There is data in elements I use to change image source and other 
                }

                onActivated : {
                    // Some actions on activated
                }
            }

As I understand, there is troubles with Popup or ListView. And absolutely have no idea how to fix it. I'm tried boundsBehavior: Flickable.StopAtBounds but it have no effect on this. It's may seem rusty. This is first solution I found to implement possibility to see images in

EDIT

I have tested example provided from Qt - it's elements (text) is bouncing on mouse too!

Answer 1

Just add anchors to your ListView in Popup. Use anchors.fill: parent.

So your popup would look like this:

popup: Popup {
    y: languageComboBox.height - 1
    implicitWidth: languageComboBox.width
    implicitHeight: contentItem.implicitHeight
    padding: 1

    contentItem: ListView {
        implicitHeight: contentHeight
        clip: true
        anchors.fill: parent
        model: languageComboBox.popup.visible ? languageComboBox.delegateModel : null
        currentIndex: languageComboBox.highlightedIndex
        boundsBehavior: Flickable.StopAtBounds
    }
}