Custom ComboBox error in 5.11?

igor_stravinsky

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?

6thC

@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?

igor_stravinsky

@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?

igor_stravinsky

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"

igor_stravinsky

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.

6thC

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 =)