QmlDesigner: Fix the text overlap for TopLevelComboBox

Task-number: QDS-9464
Change-Id: I72e6e855c0b7ebeb6893fe9a4f463b6ef6197248
Reviewed-by: Henning Gründl <henning.gruendl@qt.io>

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/EditableListView.qml

@@ -60,6 +60,7 @@ Item {
                 valueRole: root.valueRole
                 implicitWidth: StudioTheme.Values.singleControlColumnWidth
                 width: implicitWidth
+                textElidable: true
 
                 onFocusChanged: {
                     if (itemFilterComboBox.focus)

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml

@@ -13,6 +13,7 @@ T.ComboBox {
 
     property alias actionIndicator: actionIndicator
     property alias labelColor: comboBoxInput.color
+    property alias textElidable: comboBoxInput.elidable
 
     // This property is used to indicate the global hover state
     property bool hover: (comboBoxInput.hover || actionIndicator.hover || popupIndicator.hover)

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml

@@ -14,6 +14,11 @@ TextInput {
 
     property bool edit: control.activeFocus
     property bool hover: mouseArea.containsMouse && control.enabled
+    property bool elidable: false
+    readonly property real textAdvanceWidth: control.elidable
+                                             ? (elidableText.leftPadding
+                                                + elidableTextMetrics.advanceWidth)
+                                             : control.implicitWidth
 
     z: 2
     font: control.__parentControl.font
@@ -32,7 +37,7 @@ TextInput {
     selectByMouse: false
     activeFocusOnPress: false
     clip: true
-    echoMode: TextInput.NoEcho
+    echoMode: control.elidable ? TextInput.NoEcho : TextInput.Normal
 
     Text {
         id: elidableText
@@ -44,9 +49,16 @@ TextInput {
         font: control.font
         color: control.color
         text: control.text
+        visible: control.elidable
         elide: Text.ElideRight
     }
 
+    TextMetrics {
+        id: elidableTextMetrics
+        font: elidableText.font
+        text: elidableText.text
+    }
+
     Rectangle {
         id: background
         x: control.style.borderWidth