Make ComboBoxes work a bit more

TeroStyle/ComboBox.qml

@@ -16,60 +16,75 @@ T.ComboBox {
         height: 47
         radius: Dimensions.radius
     }
+    contentItem: T.TextField {
+        autoScroll: control.editable
+        color: Colors.foreground
+        enabled: control.editable
+        font: Typography.body
+        inputMethodHints: control.inputMethodHints
+        readOnly: control.down
+        selectByMouse: control.selectTextByMouse
+        text: control.editable ? control.editText : control.displayText
+        validator: control.validator
+    }
+    delegate: MenuItem {
+        id: menuItem
+
+        required property int index
+        required property var model
 
-    delegate: T.ItemDelegate {
-        width: control.width
-        height: implicitContentHeight + topPadding + bottomPadding
-        padding: Dimensions.s
-        leftPadding: control.leftPadding
-        contentItem: Label {
-            text: control.textRole ? model[control.textRole] : modelData
-            color: Colors.foreground
-            elide: Text.ElideRight
-            verticalAlignment: Text.AlignVCenter
-        }
         highlighted: control.highlightedIndex === index
+        hoverEnabled: control.hoverEnabled
+        text: model[control.textRole]
+        width: control.width
+
+        background: Rectangle {
+            color: menuItem.down || menuItem.highlighted ? Colors.primary : "transparent"
+            height: menuItem.height
+            width: menuItem.width
+        }
     }
     indicator: Label {
-        x: control.width - width
         height: control.height
-        width: contentWidth + Dimensions.s * 2
-        text: "▼"
-        verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
         padding: Dimensions.s
+        text: "▼"
+        verticalAlignment: Text.AlignVCenter
+        width: contentWidth + Dimensions.s * 2
+        x: control.width - width
 
-        background:  Rectangle {
+        background: Rectangle {
             anchors.fill: parent
+            border.color: Colors.interactive
+            bottomRightRadius: Dimensions.radius
             color: Colors.primary
             topRightRadius: Dimensions.radius
-            bottomRightRadius: Dimensions.radius
-            border.color: Colors.interactive
         }
     }
-
     popup: T.Popup {
-        y: control.height
-        z: 2
         width: control.width
+        height: Math.min(contentItem.implicitHeight + 2, control.Window.height - topMargin - bottomMargin)
+        topMargin: 6
+        bottomMargin: 6
+        padding: 1
+
+        background: Rectangle {
+            border.color: Colors.interactive
+            color: Colors.mantle
+            radius: Dimensions.radius
+        }
         contentItem: ListView {
             clip: true
+            currentIndex: control.highlightedIndex
             implicitHeight: contentHeight
             model: control.popup.visible ? control.delegateModel : null
-            currentIndex: control.highlightedIndex
+            
+            T.ScrollBar.vertical: ScrollBar { }
 
             highlight: Rectangle {
                 color: Colors.primary
                 opacity: Colors.highlightOpacity
             }
-
-            ScrollIndicator.vertical: ScrollIndicator {}
-        }
-
-        background: Rectangle {
-            color: Colors.mantle
-            border.color: Colors.interactive
-            radius: Dimensions.radius
         }
     }
 }