QML Combobox doesn't enable editing

[gabor53]

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.

[Diracsbracket]

@gabor53

Delete this:

 contentItem: Text {
      text: whatis.displayText
}

It masks your combobox, and is not needed.

[gabor53]

Thank you. It works now.