How to open ComboBox dropdown menu?

Question

I'm working on a custom ComboBox item with two icons in both sides and a ComboBox in the middle. I want that when any of the icons are clicked the ComboBox dropdown menu opens, but i don't know how to do it.

Here is my code:

// ComboIcon.qml

Rectangle{
    color: "#fff"
    radius: 10
    property alias iconSource: icon.source
    property alias comboModel: combo.model

    Row{
        anchors.fill: parent
        Item{
            width: parent.width * 0.2
            height: parent.height
            Image{
                id: icon
                width: parent.width * 0.7
                height: parent.height * 0.7
                anchors.centerIn: parent
            }
            MouseArea{
                anchors.fill: parent
                // onClicked: combo.??
            }
        }
        ComboBox{
            id: combo
            width: parent.width * 0.65
            height: parent.height
            style: ComboBoxStyle{
                background:Rectangle {
                    color: "#fff"
                    anchors.fill: parent
                }
                label: Text {
                    height: parent.height * 0.7
                    anchors.verticalCenter: parent.verticalCenter
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHLeft
                    color: "#6186da"
                    font.family: "SansSerif"
                    font.pointSize : 20
                    fontSizeMode: Text.Fit
                    text: control.currentText
                }
            }
        }
        Item{
            width: parent.width * 0.15
            height: parent.height
            Image{
                width: parent.width * 0.4
                height: parent.height * 0.4
                anchors.centerIn: parent
                fillMode: Image.PreserveAspectFit
                source:  "../assets/images/combo_arrow.png"
            }
            MouseArea{
                anchors.fill: parent
                //onClicked: combo.??
            }
        }
    }
}

I was thinking about using something like combo.clicked() or combo.focus = true, but it doesn't seem to work. Any help would be really appreciated, thanks.

Answer 1

According to the sources, Combobox has an internal property __popup. Since it is internal, it is not guaranteed to be consistent among different versions of Qt. However, since controls 1 can be considered "done" it is quite unlikely that such a property is going to change in future releases.

Using __popup you can write something like that:

import QtQuick 2.2
import QtQuick.Window 2.0
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.4

ApplicationWindow {
    visible: true
    width: 300
    height: 200

    RowLayout {
        anchors.fill: parent

        Image {
            fillMode: Image.PreserveAspectFit
            Layout.preferredHeight: 64
            source: "https://cdn1.iconfinder.com/data/icons/prettyoffice9/128/open-file.png"

            MouseArea {
                anchors.fill: parent
                onClicked: combo.__popup.toggleShow()  // <-- showing the popup here!
            }
        }

        ComboBox {
            id: combo
            model: 3
        }
    }
}

Finally, a similar approach can be followed for ComboBox from controls 2 where popup is not internal and can be shown by simply changing its visible property, i.e.:

combo.popup.visible = true