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

Selection of highlighted item in combobox by hitting ENTER



  • Hi,

    There is a combo box defined as follows:

    CustomCombobox.qml

    import QtQuick 2.9
    import QtQuick.Controls 2.2
    
    ComboBox {
        id: control
        model: ["First", "Second", "Third","Fourth","Fifth","Sixth","Seventh","Eighth","Nineth"]
    
        delegate: ItemDelegate {
            width: control.width
            contentItem: Text {
                text: modelData
                color: "#21be2b"
                font: control.font
                elide: Text.ElideRight
                verticalAlignment: Text.AlignVCenter
            }
            highlighted: control.currentIndex === 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"
            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 {
                id: listViewId
                clip: true
                implicitHeight: contentHeight
                model: control.popup.visible ? control.delegateModel : null
                currentIndex: control.highlightedIndex
                ScrollIndicator.vertical: ScrollIndicator { }
            }
    
            background: Rectangle {
                border.color: "#21be2b"
                radius: 2
            }
        }
    }
    
    

    It is used in main.qml as follows:

    import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.2
    
    Window {
        visible: true
        width: 1280
        height: 800
        title: qsTr("Combobox")
    
        CustomCombobox{
            anchors.centerIn: parent
            onActivated: {
                console.log(currentText)
            }
        }
    }
    
    

    User should be able to select the highlighted option in the list, by hitting ENTER Key. I am displaying current text onActivated signal. But the highlighted option is not getting selected. What could be the reason?


Log in to reply