QML "Material Style" ComboBox Bug?

Question

I've noticed, that when I choose "Material Style" and then create ComboBox with a lot of elements in model it slides popup down when clicked for the 2nd time. The problem is that then I cannot choose last element in the ComboBox. I have already encountered this kind of problem (with sliding popup down and slightly right) when creating Dialogs/Popups, but then I used "parent: Overlay.overlay" and set x,y coordinates and everything works OK. This time I have no idea how to repair it.

Screenshots:

1st click on ComboBox:

2nd click on ComboBox:

Here is my code:

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

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

    ComboBox {
        id: comboBox
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        model: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
    }
}

main.py:

import sys
import os

from PySide2.QtGui import QGuiApplication
from PySide2.QtQml import QQmlApplicationEngine


if __name__ == "__main__":
    app = QGuiApplication(sys.argv)
    os.environ["QT_QUICK_CONTROLS_STYLE"] = "Material"
    engine = QQmlApplicationEngine()
    engine.load(os.path.join(os.path.dirname(__file__), "main.qml"))

    if not engine.rootObjects():
        sys.exit(-1)
    sys.exit(app.exec_())

Marcelo Marcelo · Accepted Answer · 2021-01-23T21:37:49

The problem reproduced as you described on my system (on Ubuntu 20.04 on with Intel CPU), so it does seem to be a bug.

I was able to workaround this problem by customizing the ControlBox's Popup (see Customizing ComboBox). Here is my main.qml:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.15

ApplicationWindow {
    id: window
    width: 640
    height: 480

    visible: true
    title: qsTr("Hello World")

    ComboBox {
        anchors.centerIn: parent
        id: control
        model: 20

        popup: Popup {
            y: control.height/2-implicitHeight/2
            width: control.width
            implicitHeight: contentItem.implicitHeight < (ApplicationWindow.window.height * 0.9)? contentItem.implicitHeight : ApplicationWindow.window.height * 0.9

            padding: 0
            Material.elevation: 3

            contentItem: ListView {
                clip: true
                implicitHeight: contentHeight
                model: control.popup.visible ? control.delegateModel : null
                currentIndex: control.highlightedIndex
            }
        }
    }
}

I used a 'default' qtquickcontrols2.conf file:

[Controls]
Style=Material

[Universal]
Theme=System
Accent=Red

[Material]
Theme=Light
Accent=Teal
Primary=BlueGrey

You will likely need to fudge a bit to get the look and feel of the custom Popup the way you want it (as I had to), in order to get the behavior similar to the ControBox's default behavior on setup, or to your desired behavior (I played with y, implicitHeight, padding and Material.elevation but left Material's properties alone, except for elevation).

You probably noticed that I replaced Window with ApplicationWindow, as that is what I am familiar with and provides access to the ApplicationWindow overlay.

I hope this workaround also works on your setup.

QML "Material Style" ComboBox Bug?

1 Answers