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

Editable customized ComboBox doesn't allow editing



  • 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.



  • 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:-

    0_1562213260018_7d3b664b-168e-4971-bab0-64ae4227889d-image.png

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

    0_1562213309258_09d55860-b359-4b27-b2b4-85a54361ad13-image.png



  • 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.



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


Log in to reply