Quick controls 2 ComboBox doesn't show the popup with the delegate

Manu19

Hi Devs, I have tried to use a ComboBox with a model. On Desktop all works fine, but on ios (Iphone 7)
the popup with the delegates are not show up.

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.2

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Example")

    Flickable {
        id: flickable
        anchors.fill: parent
        contentHeight: root.implicitHeight
        boundsBehavior: Flickable.OvershootBounds

        Pane {
            id: root
            anchors.fill: parent

            ColumnLayout {
                anchors.right: parent.right
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter

                Label {
                    anchors { left: parent.left; right: parent.right }
                    topPadding: 10
                    bottomPadding: 10
                    font.pixelSize: 20
                    horizontalAlignment: Qt.AlignHCenter
                    text: qsTr("Example")
                }

                ComboBox {
                      textRole: "key"
                      model: ListModel {
                          ListElement { key: "First"; value: 123 }
                          ListElement { key: "Second"; value: 456 }
                          ListElement { key: "Third"; value: 789 }
                      }
                }

            }
        }
    }
}

Have anyone the same problem?

I use Qt 5.9.1 and QuickControls 2.2

Everton Fonseca

@Manu19 Hi, you can use this.

Customizing ComboBox
ComboBox consists of background, content item, popup, and delegate.

import QtQuick 2.6
import QtQuick.Controls 2.1

ComboBox {
id: control
model: ["First", "Second", "Third"]

  delegate: ItemDelegate {
      width: control.width
      contentItem: Text {
          text: modelData
          color: "#21be2b"
          font: control.font
          elide: Text.ElideRight
          verticalAlignment: Text.AlignVCenter
      }
      highlighted: control.highlightedIndex == index
  }

  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
          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 ? "#17a81a" : "#21be2b";
          context.fill();
      }
  }

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

      text: control.displayText
      font: control.font
      color: control.pressed ? "#17a81a" : "#21be2b"
      horizontalAlignment: Text.AlignLeft
      verticalAlignment: Text.AlignVCenter
      elide: Text.ElideRight
  }

  background: Rectangle {
      implicitWidth: 120
      implicitHeight: 40
      border.color: control.pressed ? "#17a81a" : "#21be2b"
      border.width: control.visualFocus ? 2 : 1
      radius: 2
  }

  popup: Popup {
      y: control.height - 1
      width: control.width
      implicitHeight: listview.contentHeight
      padding: 1

      contentItem: ListView {
          id: listview
          clip: true
          model: control.popup.visible ? control.delegateModel : null
          currentIndex: control.highlightedIndex

          ScrollIndicator.vertical: ScrollIndicator { }
      }

      background: Rectangle {
          border.color: "#21be2b"
          radius: 2
      }
  }

}

jpnurmi

It has been fixed in Qt 5.9.2. Here's the bug report: https://bugreports.qt.io/browse/QTBUG-61935 (including a workaround in the comment section).

Manu19

@jpnurmi Thank you for this information.

Everton Fonseca

@Manu19 no problem = D