Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Editable customized ComboBox doesn't allow editing
Forum Updated to NodeBB v4.3 + New Features

Editable customized ComboBox doesn't allow editing

Scheduled Pinned Locked Moved Solved QML and Qt Quick
4 Posts 2 Posters 821 Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • G Offline
    G Offline
    gabor53
    wrote on last edited by
    #1

    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.

    1 Reply Last reply
    0
    • Shrinidhi UpadhyayaS Offline
      Shrinidhi UpadhyayaS Offline
      Shrinidhi Upadhyaya
      wrote on last edited by Shrinidhi Upadhyaya
      #2

      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

      Shrinidhi Upadhyaya.
      Upvote the answer(s) that helped you to solve the issue.

      G 1 Reply Last reply
      4
      • Shrinidhi UpadhyayaS 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:-

        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

        G Offline
        G Offline
        gabor53
        wrote on last edited by
        #3

        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.

        1 Reply Last reply
        1
        • G Offline
          G Offline
          gabor53
          wrote on last edited by
          #4

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

          1 Reply Last reply
          1

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved