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

QML Combobox doesn't enable editing



  • Hi,
    My code includes an editable combobox. I imported QtQuick.Controls 1.4 as required by the the documentation. I actually imported all QtQuick.Controls, but the editable property doesn't work. The dropdown list works.
    Here is the code I have:

    import VPlayApps 1.0
    import QtQuick 2.0
    import QtQuick.Controls 2.4
    import QtQuick.Controls 1.0
    import QtQuick.Controls 1.4
    import QtQuick.Controls 1.1
    import QtQuick.Controls 2.1
    import QtQuick.Controls 2.0
    import QtQuick.Controls 2.3
    import QtQuick.Controls 2.2
    import QtQuick.LocalStorage 2.0
    import "Database.js" as JS
    
    App {
    
        Rectangle {
            id: root
            color: "#a1d9ea"
            anchors.fill: parent
            focus: false
    
            Text {
                text: "Dropbox"
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                anchors.top: parent.top
                anchors.topMargin: dp(50)
            }
    
            Rectangle {
                id: what
                anchors.top: root.top
                anchors.topMargin: dp(80)
                anchors.horizontalCenter: root.horizontalCenter
    
                ComboBox {
                    id: whatis
                    width: dp(100)
                    height: dp(30)
                    editable: true
    
                    model: ListModel {
                        id: model
                        ListElement {
                            text: "dog"
                        }
                        ListElement {
                            text: "bear"
                        }
                    }
    
                    delegate: ItemDelegate {
                        width: whatis.width
                        height: 50
                        text: model.text
                        font.pixelSize: 18
                        font.weight: whatis.currentIndex === model.index ? Font.DemiBold : Font.Normal
                    }
    
                    contentItem: Text {
                        text: whatis.displayText
                    }
    
                    onAccepted: {
                        if (find(currentText) === -1) {
                            model.append({
                                             text: editText
                                         })
                            currentIndex = find(editText)
                        }
                    }
                }
    
                Component.onCompleted: {
                    JS.dbInit()
                    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({
                                                 id: results.rows.item(i).rowid,
                                                 checked: " ",
                                                 text: results.row.item(i).what
                                             })
                        }
                    })
                }
            }
        }
    }
    
    

    What am I missing?
    Thank you for your help.



  • @gabor53

    Delete this:

     contentItem: Text {
          text: whatis.displayText
    }
    

    It masks your combobox, and is not needed.



  • Thank you. It works now.


Log in to reply