Editable customized ComboBox doesn't allow editing

[gabor53]

Hi,
I have a ComboBox that works OK. The only problem is that it doesn't allow editing despite the fact that I set it to editable.
The code:

import Felgo 3.0
//import QtQuick 2.13
import QtQuick 2.9
import QtQuick.Controls 2.5
import QtQuick.Controls.Styles 1.4
import QtQuick.LocalStorage 2.12
import "Database.js" as JS

App {

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

        ComboBox {
            id: whatCombo

            anchors.horizontalCenter: root.horizontalCenter
            anchors.verticalCenter: root.verticalCenter

            editable: true
            textRole: "what"

            height: 50
            width: 230

            model: ListModel {
                id: listModel
            }

            delegate: ItemDelegate {
                width: whatCombo.width
                height: whatCombo.height

                //Defines the items in the dropdown list.
                contentItem: Text {
                    text: model.what
                    font.pixelSize: 18
                    color: "#07062d"
                }
                onClicked: whatCombo.currentIndex = index
                highlighted: whatCombo.highlightedIndex === index
            }

            contentItem: Text {
                leftPadding: 10
                rightPadding: whatCombo.indicator.width + whatCombo.spacing
                text: whatCombo.displayText

                font.pixelSize: 18
                //Sets the color in the control label.
                color: whatCombo.pressed ? "#090755" : "#6D27CE"
                verticalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
            }

            background: Rectangle {
                implicitWidth: 120
                implicitHeight: 80
                color: "#c1fbf5"
                border.color: whatCombo.pressed ? "#17a81a" : "#1042af"
                border.width: whatCombo.visualFocus ? 2 : 1
                radius: 15
            }

            onAccepted: {
                console.log("Entered onAccepted. CurrentIndex: " + currentIndex)

                if (find(editText) === -1) {
                    model.append({
                                     "what": editText
                                 })

                    console.log("editText: " + editText)

                    var newItem = editText

                    JS.dbInsert(newItem)
                }
            }

            //Reading list from db
            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": ""
                                         })
                    }
                })
            }
        }
    }
}

I realized that ContentItem: Text masking the editable textfield on the control but without it I can't customize ComboBox. How can I make it editable and customize it at the same time? Thank you for your help.

[Shrinidhi Upadhyaya]

Hi @gabor53 ,

• You can use a TextInput instead of Text in contentItem, so that you can edit the Text.

• Here is the sample code:-

   ComboBox {
    id: whatCombo
  
    height: 50
    width: 230
    anchors.horizontalCenter: root.horizontalCenter
    anchors.verticalCenter: root.verticalCenter
  
    editable: true
  
    model: ListModel {
        id: model
        ListElement { text: "Banana" }
        ListElement { text: "Apple" }
        ListElement { text: "Coconut" }
    }
    
    delegate: Rectangle {
        width: whatCombo.width
        height: whatCombo.height
  
        //Defines the items in the dropdown list.
        Text {
            id: txt
            
            text: model.text
            font.pixelSize: 18
            color: "#07062d"
            anchors.verticalCenter: parent.verticalCenter
        }
  
        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            onEntered: {
                txt.color = "red"
            }
            onExited: {
                txt.color = "#07062d"
            }
        }
    }
  
    contentItem: TextInput {
        leftPadding: 10
        rightPadding: whatCombo.indicator.width + whatCombo.spacing
        text: whatCombo.displayText
  
        font.pixelSize: 18
        //Sets the color in the control label.
        color: whatCombo.pressed ? "#090755" : "#6D27CE"
        verticalAlignment: Text.AlignVCenter
    }
  
    background: Rectangle {
        implicitWidth: 120
        implicitHeight: 80
        color: "#c1fbf5"
        border.color: whatCombo.pressed ? "#17a81a" : "#1042af"
        border.width: whatCombo.visualFocus ? 2 : 1
        radius: 15
    }
  
    onAccepted: {
        if (find(editText) === -1)
            model.append({text: editText})
    }
  }
  

Sample Output:-

• Once you edit the text and press enter the item will get added to the ComboBox

[gabor53]

Hi @Shrinidhi-Upadhyaya ,
Thank you for your reply. It works really well. I have one more question though related to this.
When I click on the new TextInput nothing visible happens until I enter the first character and the cursor appears. Is there a way to put a visible cursor in the TextInput field when I click on the field and before I enter anything? (like turning cursorVisible on.)
Thank you.

[gabor53]

I figured it out. I had to change the leftPadding from 0 to anything else.
Thank you.