How to highlight selected item in a custom ComboBox of QML?

Question

This is the code:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.0

ComboBox
{
    id: control
    property string text_color
    property string backcolor
    property int font_size
    property string font_family: decoration.font_family

    model: ["ABCD", "XYZQ"]

    delegate: ItemDelegate {
            width: control.width
            height:control.height
            Rectangle
            {
                height: control.height; width: control.width; border.width: 1; color: decoration.colour_666b78
                radius: 4

                border.color: decoration.colour_24232f
                Text {
                        opacity: 0.70
                        text: modelData
                        color: control.text_color
                        font.family: control.font_family
                        font.pointSize: control.font_size
                        anchors.centerIn: parent
                    }
            }

            highlighted: control.highlightedIndex === index


        }

    indicator: Canvas {
        id: canvas
        x: control.width - width - control.rightPadding
        y: control.topPadding + (control.availableHeight - height) / 2
        width: decoration.getWidth( 12)
        height: decoration.getHeight( 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 ? "white":"white"
            context.fill();
        }
    }

    contentItem: Text
    {
        leftPadding: decoration.getWidth( 10)
        rightPadding: control.indicator.width + control.spacing

        text: control.displayText
        font.family: control.font_family
        font.pointSize: control.font_size
        color: control.pressed ? "#bdbdbe" : "#bdbdbe"
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {
        width: control.width
        height: control.height
        color: decoration.colour_292a38
        border.color: decoration.colour_23232f
        border.width: decoration.button_border_width
        radius: decoration.box_radius


    }

    popup:
        Popup
        {
            y: control.height - 1
            width: control.width
            implicitHeight: contentItem.implicitHeight
            padding: decoration.getWidth( 1)

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

                ScrollIndicator.vertical: ScrollIndicator { }
            }

            background: Rectangle {
                color: control.backcolor
                border.color: decoration.colour_69697c
                radius: decoration.box_radius
            }
        }
}

This results in:

As you can see there is something white coloured shown behind the first item. That seems to be the highlight.

I want the selected item's rectangle's colour to change on highlight. How to achieve that?

Answer 1

There are at least two problems with your Combobox.

1. You're setting the height of your ListView instead of its implicitHeight. You should use implicitHeight, like this:

            contentItem: ListView {
                implicitHeight: contentHeight

                ...
            }

2. The other problem is that your ItemDelegate is using the default background. One option here is to change the background to just be an empty Item and then switch the color on your contentItem based on the highlighted state:

    delegate: ItemDelegate {
        width: control.width
        height: control.height

        contentItem: Rectangle
        {
            color: highlighted ? "red" : decoration.colour_666b78

            ...
        }

        background: Item {}

        highlighted: control.highlightedIndex === index
    }