QML combobox styling issue in QtQuick.Controls 2.2

pra7

I am a beginner and trying to use combobox to populate a list of elements, but when I tried to style there is some problem while displaying text, Below is the code:

import QtQuick 2.7     
import QtQuick.Controls 2.2

Item {
    property string btntext : "First"
    signal dropDownIndexChanged(int index)

id: mainDropDown
ListModel{
    id: modelList
    ListElement{ text: "First" }
    ListElement{ text: "Second" }
    ListElement{ text: "Third" }
}

ComboBox {
    id: comboButton
    width: parent.width
    height: parent.height
    model:modelList
    currentIndex: 0
    editText : btntext

    Image {
        id: imageMainButton
        x: 119
        anchors.top: parent.verticalCenter
        anchors.right: parent.right
        anchors.rightMargin: 9
        anchors.topMargin: -7
        fillMode: Image.Tile
        sourceSize.height: 25
        sourceSize.width: 25
        source: "<some image>"
    }
    delegate: ItemDelegate {
        id:itemDelegate
        width: comboButton.width

        background:Rectangle{
            gradient: Gradient {
                GradientStop {
                    position: 0.0
                    color: itemDelegate.down ? "white" : "blue"
                }
                GradientStop {
                    position: 1.0
                    color: itemDelegate.down ? "yellow" : "orange"
                }
            }
        }

        contentItem: Text {
            text: modelData
            elide: Text.ElideRight

            horizontalAlignment: Text.AlignLeft
            verticalAlignment: Text.AlignVCenter
            font.pointSize: 11
            font.family: "Arial"
            color:  itemDelegate.down ? "black" : "white"
        }
        highlighted: comboButton.highlightedIndex === index

    }

    indicator: Canvas {
    }

//When this is added combo box text disapears or will be empty until something else is selected from the dropdown.
    contentItem: Text {
        text: comboButton.displayText             
        anchors.centerIn: parent

        //font: comboButton.font
        horizontalAlignment: Text.AlignLeft
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight

        renderType: Text.NativeRendering
        anchors.left : parent.left
        anchors.leftMargin: 10
        font.family: "Verdena"
        font.pointSize: 12
        font.bold: true
        color: "white"
    }


    background: Rectangle {
        implicitWidth: 120
        implicitHeight: 40
        radius: 2

        color : "white"
        //height:100
        smooth: true
        //border.width: 1
        border.color: "white"


    }

    popup: Popup {
        y: comboButton.height
        width: comboButton.width -5
        //implicitHeight: contentItem.implicitHeight -1
        padding: 1

        background: Rectangle {
            border.color: "black"
            radius: 2
            color : "white"
        }

        contentItem: ListView {
            //clip: true
            implicitHeight: contentHeight
            model: comboButton.popup.visible ? comboButton.delegateModel : null
            currentIndex: comboButton.highlightedIndex
            interactive: false

        }
    }

    onCurrentIndexChanged:
    {
        btntext = mainDropDown.get(currentIndex).text
        dropDownIndexChanged(currentIndex)
        console.log(btntext ,currentIndex)
    }
    }
}

As mentioned above why does combobox text is not displayed until I select an item from the drop down?
The selected index/item is not highlighted at all.

Eeli K

@pra7 I can look into this if you make it a self-contained main.qml which opens a window when it's run.

pra7

@Eeli-K thanks for replying. I have almost solved the issue .and will post the answer soon.