1 files changed, 43 insertions, 22 deletions

diff --git a/src/imports/controls/universal/ComboBox.qml b/src/imports/controls/universal/ComboBox.qml
index 2d768a1d..4c5ecf74 100644
--- a/src/imports/controls/universal/ComboBox.qml
+++ b/src/imports/controls/universal/ComboBox.qml
@@ -36,9 +36,9 @@
 
 import QtQuick 2.8
 import QtQuick.Window 2.2
-import QtQuick.Controls 2.1
-import QtQuick.Templates 2.1 as T
-import QtQuick.Controls.Universal 2.1
+import QtQuick.Controls 2.2
+import QtQuick.Templates 2.2 as T
+import QtQuick.Controls.Universal 2.2
 
 T.ComboBox {
     id: control
@@ -50,39 +50,58 @@ T.ComboBox {
                                       indicator ? indicator.implicitHeight : 0) + topPadding + bottomPadding)
     baselineOffset: contentItem.y + contentItem.baselineOffset
 
-    spacing: 10
-    padding: 12
-    topPadding: padding - 7
-    rightPadding: padding - 2
-    bottomPadding: padding - 5
+    leftPadding: padding + (!control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
+    rightPadding: padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
+
+    Universal.theme: editable && activeFocus ? Universal.Light : undefined
 
     delegate: ItemDelegate {
-        width: control.popup.width
+        width: parent.width
         text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
         highlighted: control.highlightedIndex === index
         hoverEnabled: control.hoverEnabled
     }
 
     indicator: Image {
-        x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
+        x: control.mirrored ? control.padding : control.width - width - control.padding
         y: control.topPadding + (control.availableHeight - height) / 2
         source: "image://universal/downarrow/" + (!control.enabled ? control.Universal.baseLowColor : control.Universal.baseMediumHighColor)
         sourceSize.width: width
         sourceSize.height: height
+
+        Rectangle {
+            z: -1
+            width: parent.width
+            height: parent.height
+            color: control.activeFocus ? control.Universal.accent :
+                   control.pressed ? control.Universal.baseMediumLowColor :
+                   control.hovered ? control.Universal.baseLowColor : "transparent"
+            visible: control.editable && !contentItem.hovered && (control.pressed || control.hovered)
+            opacity: control.activeFocus && !control.pressed ? 0.4 : 1.0
+        }
     }
 
-    contentItem: Text {
-        leftPadding: control.mirrored && control.indicator ? control.indicator.width + control.spacing : 0
-        rightPadding: !control.mirrored && control.indicator ? control.indicator.width + control.spacing : 0
+    contentItem: T.TextField {
+        leftPadding: control.mirrored ? 1 : 12
+        rightPadding: control.mirrored ? 10 : 1
+        topPadding: 5 - control.topPadding
+        bottomPadding: 7 - control.bottomPadding
+
+        text: control.editable ? control.editText : control.displayText
+
+        enabled: control.editable
+        autoScroll: control.editable
+        readOnly: control.popup.visible
+        inputMethodHints: control.inputMethodHints
+        validator: control.validator
 
-        text: control.displayText
         font: control.font
+        color: !control.enabled ? control.Universal.chromeDisabledLowColor :
+                control.editable && control.activeFocus ? control.Universal.chromeBlackHighColor : control.Universal.foreground
+        selectionColor: control.Universal.accent
+        selectedTextColor: control.Universal.chromeWhiteColor
         horizontalAlignment: Text.AlignLeft
         verticalAlignment: Text.AlignVCenter
-        elide: Text.ElideRight
-
-        opacity: enabled ? 1.0 : 0.2
-        color: control.Universal.foreground
     }
 
     background: Rectangle {
@@ -91,11 +110,13 @@ T.ComboBox {
 
         border.width: control.flat ? 0 : 2 // ComboBoxBorderThemeThickness
         border.color: !control.enabled ? control.Universal.baseLowColor :
-                       control.pressed || popup.visible ? control.Universal.baseMediumLowColor :
+                       control.editable && control.activeFocus ? control.Universal.accent :
+                       control.down || popup.visible ? control.Universal.baseMediumLowColor :
                        control.hovered ? control.Universal.baseMediumColor : control.Universal.baseMediumLowColor
         color: !control.enabled ? control.Universal.baseLowColor :
-                control.pressed || popup.visible ? control.Universal.listMediumColor :
-                control.flat && control.hovered ? control.Universal.listLowColor : control.Universal.altMediumLowColor
+                control.down ? control.Universal.listMediumColor :
+                control.flat && control.hovered ? control.Universal.listLowColor :
+                control.editable && control.activeFocus ? control.Universal.background : control.Universal.altMediumLowColor
         visible: !control.flat || control.pressed || control.hovered || control.visualFocus
 
         Rectangle {
@@ -104,7 +125,7 @@ T.ComboBox {
             width: parent.width - 4
             height: parent.height - 4
 
-            visible: control.visualFocus
+            visible: control.visualFocus && !control.editable
             color: control.Universal.accent
             opacity: control.Universal.theme === Universal.Light ? 0.4 : 0.6
         }