QML ComboBox doesn't add text from its dropdown list to the text area

[gabor53]

Hi,
I have the following code which displays its dropdown list from a db. When I choose an item from the list the text is highlighted for a moment, the dropdown closes but the chosen text is not copied to the text area.
The code:

import QtQuick 2.9
import QtQuick 2.0
import VPlayApps 1.0
import QtQuick.Controls 1.4
import QtQuick.Controls 2.2
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.3
import QtQuick.LocalStorage 2.0
import QtQml.Models 2.3
import "Database.js" as JS
import "Dropboxes.js" as DB

App {
    Rectangle {
        id: root
        color: "#a1d9ea"
        anchors.fill: parent
        focus: false

        Text {
            id: title
            text: "Combobox"
            font.pixelSize: 25
            anchors.horizontalCenter: root.horizontalCenter
            anchors.top: root.top
            anchors.topMargin: 30
        }

        ComboBox {
            id: whatCombo
            anchors.horizontalCenter: title.horizontalCenter
            anchors.top: title.bottom
            anchors.topMargin: 30
            editable: true
            textRole: "text"
            height: 50
            width: 230
            model: ListModel {
                id: listModel
            }

            delegate: ItemDelegate {
                width: whatCombo.width
                height: whatCombo.height
                text: model.what
                font.pixelSize: 18
            }
        }

        Component.onCompleted: {
            var db = JS.dbGetHandle()
            db.transaction(function (tx) {
                var results = tx.executeSql(
                            'SELECT what FROM dropboxWhatIs order by what desc')
                for (var i = 0; i < results.rows.length; i++) {
                    listModel.append({
                                         what: results.rows.item(i).what,
                                         checked: ""
                                     })
                }
            })
        }
    }
}

Am I missing something?
Thank you for your help.

[Gojir4]

@gabor53 Hi, you need to bind text with the current value of the combobox:

Text {
    ...
    text: whatCombo.currentText
    ...
}

[gabor53]

Hi @Gojir4,

The problem is that when I click on a dropdown item it is either

• not actually chosen or

• chosen, but it doesn't appear in the combobox text area.
  Your recommendation works right after there is an item chosen and it appears in the combobox's editable text area.

[Gojir4]

@gabor53 Do you mean that clicking on an item doens't always change currentText ?

[gabor53]

@Gojir4
Yes. Actually never does. It is always empty.

[Gojir4]

@gabor53 You can try with that:

delegate: ItemDelegate {
    ...
    onClicked: whatCombo.currentIndex = index
    highlighted: control.highlightedIndex === index 
}

I'm surprised it's not selected automatically.

[Diracsbracket]

@gabor53 said in QML ComboBox doesn't add text from its dropdown list to the text area:

textRole: "text"

Again, you don't have a role text in your model. It should be what since you use:

 listModel.append({
    what: results.rows.item(i).what,
    checked: ""
})

[gabor53]

Hi @Diracsbracket ,
Thank you. I changed it and it works perfectly.