Custom ComboBox not scrolling

[Saviz]

I used the QtQuick documentation to customize a ComboBox and successfully modified its colors. While the ComboBox generally works as expected, I encountered an issue when it contains a large number of items (around 35–50). The dropdown doesn't allow scrolling, and as a result, not all items are visible at once. I expected the ComboBox to handle this with scrolling but it doesn't. Could you help me identify the cause? Here's my code:

pragma ComponentBehavior: Bound

import QtQuick
import QtQuick.Controls.Basic
import QtQuick.Layouts

// Custom CPP Registered Types
import AppTheme 1.0

ComboBox {
    id: control

    property real dropDownTopMarign: 0

    opacity: enabled ? 1.0 : 0.5

    delegate: ItemDelegate {
        id: itemDelegate

        width: control.width
        height: 30

        required property var model
        required property int index

        contentItem: Text {
            leftPadding: 7

            text: itemDelegate.model[control.textRole]

            color: {
                if (itemDelegate.highlighted) {
                    Qt.color(AppTheme.colors["UFO_ComboBox_Item_Text_Highlighted"])
                }

                else {
                    Qt.color(AppTheme.colors["UFO_ComboBox_Item_Text_Normal"])
                }
            }

            font: control.font
            elide: Text.ElideRight
            verticalAlignment: Text.AlignVCenter
        }

        background: Rectangle {
            width: control.width

            radius: 0
            color: itemDelegate.highlighted ? Qt.color(AppTheme.colors["UFO_ComboBox_Item_Background_Highlighted"]) : Qt.color(AppTheme.colors["UFO_ComboBox_Item_Background_Normal"])
        }

        highlighted: control.highlightedIndex === index
    }

    contentItem: Text {
        leftPadding: 20
        rightPadding: control.indicator.width + control.spacing

        text: control.displayText
        font: control.font
        color: control.pressed ? Qt.color(AppTheme.colors["UFO_ComboBox_Text_Pressed"]) : Qt.color(AppTheme.colors["UFO_ComboBox_Text_Normal"])
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {
        implicitWidth: 120
        implicitHeight: 40

        radius: 0
        color: Qt.color(AppTheme.colors["UFO_ComboBox_Background"])
        border.color: control.pressed ? Qt.color(AppTheme.colors["UFO_ComboBox_Border_Pressed"]) : Qt.color(AppTheme.colors["UFO_ComboBox_Border_Normal"])
        border.width: control.visualFocus ? 2 : 1
    }

    indicator: Canvas {
        id: canvas

        x: control.width - width - control.rightPadding
        y: control.topPadding + (control.availableHeight - height) / 2

        width: 12
        height: 8

        contextType: "2d"

        Connections {
            target: control

            function onPressedChanged() {
                canvas.requestPaint()
            }
        }

        onPaint: {
            context.reset()
            context.moveTo(0, 0)
            context.lineTo(width, 0)
            context.lineTo(width / 2, height)
            context.closePath()
            context.fillStyle = control.pressed ? Qt.color(AppTheme.colors["UFO_ComboBox_Arrow_Background_Pressed"]) : Qt.color(AppTheme.colors["UFO_ComboBox_Arrow_Background_Normal"])
            context.fill()
        }
    }

    popup: Popup {
        y: control.height -1

        width: control.width
        implicitHeight: contentItem.implicitHeight

        padding: 0

        contentItem: ListView {
            implicitHeight: contentHeight

            clip: true
            model: control.popup.visible ? control.delegateModel : null
            currentIndex: control.highlightedIndex

            ScrollIndicator.vertical: ScrollIndicator {}
        }

        background: Rectangle {
            radius: 0
            color: Qt.color(AppTheme.colors["UFO_ComboBox_Popup_Background"])
            border.color: Qt.color(AppTheme.colors["UFO_ComboBox_DropBox_Border"])
        }
    }
}

[Shrishashank]

It seems the issue you're experiencing with the ComboBox not scrolling when there are many items is due to the absence of proper height configuration for the ListView inside the Popup. The ListView needs an explicit height to trigger scrolling behavior, and without it, the dropdown won't scroll even when there are many items.

To fix this, you can add a fixed or constrained height to the ListView, and ensure the ScrollIndicator appears when needed. Here's the updated code for the popup section:

popup: Popup {
y: control.height - 1

width: control.width
implicitHeight: contentItem.implicitHeight

padding: 0

contentItem: ListView {
    width: parent.width
    height: Math.min(200, contentHeight) // Constrain the ListView height or set a max height

    clip: true
    model: control.popup.visible ? control.delegateModel : null
    currentIndex: control.highlightedIndex

    ScrollIndicator.vertical: ScrollIndicator {
        visible: contentHeight > height // Only show the scroll indicator if the content exceeds the viewable area
    }
}

background: Rectangle {
    radius: 0
    color: Qt.color(AppTheme.colors["UFO_ComboBox_Popup_Background"])
    border.color: Qt.color(AppTheme.colors["UFO_ComboBox_DropBox_Border"])
}

}