Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-102138

QML ComboBox: Customization example is broken

    XMLWordPrintable

Details

    • b1b52d5e44 (qt/qtdeclarative/dev) 67015f1e8c (qt/qtdeclarative/6.3) 67015f1e8c (qt/tqtc-qtdeclarative/6.3) 67015f1e8c (qt/tqtc-qtdeclarative/6.3.1) 2d204c7187 (qt/tqtc-qtdeclarative/6.2)

    Description

      Copied from https://doc.qt.io/qt-6/qtquickcontrols2-customize.html#customizing-combobox

      import QtQuick 2.15
      import QtQuick.Window 2.15
      import QtQuick.Controls 2.15
      
      Window {
          width: 640
          height: 480
          visible: true
      
          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
                      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 ? "#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"
                  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: 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
                  }
              }
          }
      }
      

       

      Outcomes

      When the combobox is clicked, an empty menu is displayed with the error "qrc:/main.qml:17: ReferenceError: modelData is not defined"

       

      Workaround

      If we remove the line "required property int index" from the code, then the model works correctly.

       

      Question

      The line "required property int index" was not in the Qt 5 version: https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-combobox. This line causes "ReferenceError: modelData is not defined" in both Qt 5.15 and Qt 6.x.

      What was the intention behind the addition of this line? Should the intention still be implemented in a different way?

      Attachments

        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

        Activity

          People

            mitch_curtis Mitch Curtis
            skoh-qt Sze Howe Koh
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved:

              Gerrit Reviews

                There are no open Gerrit changes