Solved 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:-
- Once you edit the text and press enter the item will get added to the ComboBox
-
-
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.