Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Custom ComboBox error in 5.11?



  • I've written a customization of a ComboBox that follows the template on the Qt site for customization.

    In the example, the custom code for the popup menu looks like this:

    popup: Popup {
            y: control.height - 1
            width: control.width
            implicitHeight: contentItem.implicitHeight
            padding: 1
    
            contentItem: ListView {
                clip: true
                implicitHeight: contentHeight
                model: control.popup.visible ? control.delegateModel : null
                currentIndex: control.highlightedIndex
    
                ScrollIndicator.vertical: ScrollIndicator { }
            }
    
            background: Rectangle {
                border.color: "#21be2b"
                radius: 2
            }
        }
    

    And my code is very similar, except that I have a Rectangle that I use for the highlighted item in the ListView:

    popup: Popup {
            y: control.height - 1
            width: parent.width *2
            implicitHeight: contentItem.implicitHeight
            padding: 1
            font.family: "helvetica"
            font.pointSize: smallFontSize
            topPadding: -8
    
            contentItem: ListView {
                id: popupListView
                clip: true
                implicitHeight: contentHeight
                model: control.popup.visible ? control.delegateModel : null
                currentIndex: control.highlightedIndex
                highlightFollowsCurrentItem: false // false so the highlight delegate can control how the highlight is moved.
                highlight: Rectangle {
                    width: backgroundRectangle.width;
                    height: contentItem.implicitHeight *1.2
                    color: "darkgrey"
                    y: popupListView.currentItem.y + contentItem.height/2;
                }
    
            }
    
            background: Rectangle {
                id:backgroundRectangle
                color: control.backgroundColor
                border.color: control.backgroundColor
            }
        }
    

    Starting in 5.11, however, this code throws an error when used:
    "TypeError: Cannot read property 'y' of null" On the line

     y: popupListView.currentItem.y + contentItem.height/2;
    

    I assume this means that popupListView.currentItem is null.

    This wasn't an issue under 5.10, and I'm not sure how to fix the problem. Is there ever not a currentItem for a ListView?



  • @igor_stravinsky said in Custom ComboBox error in 5.11?:

    model: control.popup.visible ? control.delegateModel : null

    when you start your app - is (control.popup.visible) true?



  • @6thC control.popup.visible is set to false when Component.onCompleted is called. The popup isn't on the initial page shown to the user.

    My assumption was that the popup governs what's seen in the menu after the user clicks on the ComboBox, so it doesn't matter if the model is set before the popup is visible. Is that not the case?

    Even if the model is null, would that effect the popupListView.currentItem?



  • Here's a simple app that demonstrates the error. There are two files, main.qml and CustomCombo.qml

    Main:

    import QtQuick 2.7
    import QtQuick.Controls 2.4
    import QtQuick.Window 2.11
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        CustomCombo {
            id:control
            currentIndex: 1 //set to banana
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            width: 200
            model: [ "Banana", "Apple", "Coconut" ]
    
        }
    
    }
    

    And CustomCombo:

    import QtQuick 2.11
    import QtQuick.Layouts 1.3
    import QtQuick.Controls 2.4
    import QtGraphicalEffects 1.0
    
    ComboBox {
        id:control
        font.family: "helvetica"
        font.pointSize: 10
        height:20
    
        delegate: ItemDelegate {
                width: parent.width
                height:15
                contentItem: Text {
                    text: modelData
                    font: parent.font
                    elide: Text.ElideNone
                    verticalAlignment: Text.AlignVCenter
                }
    
                highlighted: parent.highlightedIndex === index
            }
    
        popup: Popup {
            y: control.height - 1
            width: parent.width
            implicitHeight: contentItem.implicitHeight
            padding: 1
            font.family: "helvetica"
            font.pointSize: 10
    
            contentItem: ListView {
                id: popupListView
                clip: true
                implicitHeight: contentHeight
                model: control.popup.visible ? control.delegateModel : null
                currentIndex: control.highlightedIndex
                highlightFollowsCurrentItem: false
                highlight: Rectangle {
                    width: control.width;
                    height: contentItem.implicitHeight *1.2
                    color: "darkgrey"
                    y: popupListView.currentItem.y + contentItem.height/2;
                }
    
            }
    
        }
    }
    

    This simple project still yields an error when a menu item is selected:
    "Type Error: Cannot read property 'y' of null"



  • Found the problem. It wasn't the currentItem that was null, it was apparently the contentItem. Once that was removed from the calculation of the highlight rectangle's position, the error disappeared.



  • I've initialized empty models and swapped models under ternary ops - I've never really thought of setting it to null. I expect a null model would mean anything delegated from it has to also be null, that's what I suspected was happening like maybe something was trying to load while it was null.

    I was just asking aloud what I'd think if I saw it and didn't have time to play with your example but glad to hear you got it going again. Glad it's working for you =)


Log in to reply