Add ComboBox::editable

[ChangeLog][Controls][ComboBox] Added editable property

Task-number: QTBUG-53876
Change-Id: I1cb035b3bb4c63f7935f08298814005fad51b5eb
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

4 files changed, 128 insertions, 33 deletions

diff --git a/src/imports/controls/ComboBox.qml b/src/imports/controls/ComboBox.qml
index 4944906a..b1497a12 100644
--- a/src/imports/controls/ComboBox.qml
+++ b/src/imports/controls/ComboBox.qml
@@ -64,40 +64,54 @@ T.ComboBox {
     indicator: Image {
         x: control.mirrored ? control.padding : control.width - width - control.padding
         y: control.topPadding + (control.availableHeight - height) / 2
-        source: "image://default/double-arrow/" + (control.visualFocus ? Default.focusColor : Default.textColor)
+        source: "image://default/double-arrow/" + (!control.editable && control.visualFocus ? Default.focusColor : Default.textColor)
         sourceSize.width: width
         sourceSize.height: height
         opacity: enabled ? 1 : 0.3
     }
 
-    contentItem: Text {
-        leftPadding: control.mirrored ? 0 : 12
-        rightPadding: control.mirrored ? 12 : 0
+    contentItem: T.TextField {
+        leftPadding: !control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1
+        rightPadding: control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1
         topPadding: 6 - control.padding
         bottomPadding: 6 - control.padding
 
-        text: control.displayText
+        text: control.editable ? control.editText : control.displayText
+
+        enabled: control.editable
+        autoScroll: control.editable
+        readOnly: control.popup.visible
+        inputMethodHints: control.inputMethodHints
+        validator: control.validator
+
         font: control.font
-        color: control.visualFocus ? Default.focusColor : Default.textColor
+        color: !control.editable && control.visualFocus ? Default.focusColor : Default.textColor
+        selectionColor: Default.focusColor
+        selectedTextColor: Default.textLightColor
         horizontalAlignment: Text.AlignLeft
         verticalAlignment: Text.AlignVCenter
-        elide: Text.ElideRight
-        opacity: enabled ? 1 : 0.3
+        opacity: control.enabled ? 1 : 0.3
+
+        background: Rectangle {
+            visible: control.editable && !control.flat
+            border.width: parent && parent.activeFocus ? 2 : 1
+            border.color: parent && parent.activeFocus ? Default.focusColor : Default.buttonColor
+        }
     }
 
     background: Rectangle {
         implicitWidth: 120
         implicitHeight: 40
 
-        color: control.visualFocus ? (control.pressed ? Default.focusPressedColor : Default.focusLightColor) :
-            (control.down ? Default.buttonPressedColor : Default.buttonColor)
+        color: !control.editable && control.visualFocus ? (control.pressed ? Default.focusPressedColor : Default.focusLightColor) :
+            (control.down || popup.visible ? Default.buttonPressedColor : Default.buttonColor)
         border.color: Default.focusColor
-        border.width: control.visualFocus ? 2 : 0
-        visible: !control.flat || control.pressed
+        border.width: !control.editable && control.visualFocus ? 2 : 0
+        visible: !control.flat || control.down
     }
 
     popup: T.Popup {
-        y: control.height - (control.visualFocus ? 0 : 1)
+        y: control.height
         width: control.width
         implicitHeight: contentItem.implicitHeight
         topMargin: 6
diff --git a/src/imports/controls/doc/src/includes/inputmethodhints.qdocinc b/src/imports/controls/doc/src/includes/inputmethodhints.qdocinc
new file mode 100644
index 00000000..73710e1e
--- /dev/null
+++ b/src/imports/controls/doc/src/includes/inputmethodhints.qdocinc
@@ -0,0 +1,38 @@
+//! [flags]
+The value is a bit-wise combination of flags or \c Qt.ImhNone if no hints are set.
+
+Flags that alter behavior are:
+
+\list
+\li Qt.ImhHiddenText - Characters should be hidden, as is typically used when entering passwords.
+\li Qt.ImhSensitiveData - Typed text should not be stored by the active input method
+        in any persistent storage like predictive user dictionary.
+\li Qt.ImhNoAutoUppercase - The input method should not try to automatically switch to upper case
+        when a sentence ends.
+\li Qt.ImhPreferNumbers - Numbers are preferred (but not required).
+\li Qt.ImhPreferUppercase - Upper case letters are preferred (but not required).
+\li Qt.ImhPreferLowercase - Lower case letters are preferred (but not required).
+\li Qt.ImhNoPredictiveText - Do not use predictive text (i.e. dictionary lookup) while typing.
+
+\li Qt.ImhDate - The text editor functions as a date field.
+\li Qt.ImhTime - The text editor functions as a time field.
+\endlist
+
+Flags that restrict input (exclusive flags) are:
+
+\list
+\li Qt.ImhDigitsOnly - Only digits are allowed.
+\li Qt.ImhFormattedNumbersOnly - Only number input is allowed. This includes decimal point and minus sign.
+\li Qt.ImhUppercaseOnly - Only upper case letter input is allowed.
+\li Qt.ImhLowercaseOnly - Only lower case letter input is allowed.
+\li Qt.ImhDialableCharactersOnly - Only characters suitable for phone dialing are allowed.
+\li Qt.ImhEmailCharactersOnly - Only characters suitable for email addresses are allowed.
+\li Qt.ImhUrlCharactersOnly - Only characters suitable for URLs are allowed.
+\endlist
+
+Masks:
+
+\list
+\li Qt.ImhExclusiveInputMask - This mask yields nonzero if any of the exclusive flags are used.
+\endlist
+//! [flags]
diff --git a/src/imports/controls/material/ComboBox.qml b/src/imports/controls/material/ComboBox.qml
index 50175cbe..8f41a481 100644
--- a/src/imports/controls/material/ComboBox.qml
+++ b/src/imports/controls/material/ComboBox.qml
@@ -73,17 +73,27 @@ T.ComboBox {
         source: "image://material/drop-indicator/" + (control.enabled ? control.Material.foreground : control.Material.hintTextColor)
     }
 
-    contentItem: Text {
+    contentItem: T.TextField {
         padding: 6
-        leftPadding: control.mirrored ? 0 : 12
-        rightPadding: control.mirrored ? 12 : 0
+        leftPadding: control.editable ? 2 : control.mirrored ? 0 : 12
+        rightPadding: control.editable ? 2 : control.mirrored ? 12 : 0
+
+        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.Material.foreground : control.Material.hintTextColor
+        selectionColor: control.Material.accentColor
+        selectedTextColor: control.Material.primaryHighlightedTextColor
         horizontalAlignment: Text.AlignLeft
         verticalAlignment: Text.AlignVCenter
-        elide: Text.ElideRight
+
+        cursorDelegate: CursorDelegate { }
     }
 
     background: Rectangle {
@@ -94,32 +104,43 @@ T.ComboBox {
         y: 6
         height: parent.height - 12
         radius: control.flat ? 0 : 2
-        color: control.Material.dialogColor
+        color: !control.editable ? control.Material.dialogColor : "transparent"
 
         Behavior on color {
+            enabled: !control.editable
             ColorAnimation {
                 duration: 400
             }
         }
 
-        layer.enabled: control.enabled && control.Material.background.a > 0
+        layer.enabled: control.enabled && !control.editable && control.Material.background.a > 0
         layer.effect: ElevationEffect {
             elevation: control.Material.elevation
         }
 
+        Rectangle {
+            visible: control.editable
+            y: parent.y + control.baselineOffset
+            width: parent.width
+            height: control.activeFocus ? 2 : 1
+            color: control.editable && control.activeFocus ? control.Material.accentColor : control.Material.hintTextColor
+        }
+
         Ripple {
             clip: control.flat
             clipRadius: control.flat ? 0 : 2
-            width: parent.width
+            x: control.editable && control.indicator ? control.indicator.x : 0
+            width: control.editable && control.indicator ? control.indicator.width : parent.width
             height: parent.height
             pressed: control.pressed
-            anchor: control
+            anchor: control.editable && control.indicator ? control.indicator : control
             active: control.pressed || control.visualFocus || control.hovered
             color: control.Material.rippleColor
         }
     }
 
     popup: T.Popup {
+        y: control.editable ? control.height - 5 : 0
         width: control.width
         implicitHeight: contentItem.implicitHeight
         transformOrigin: Item.Top
diff --git a/src/imports/controls/universal/ComboBox.qml b/src/imports/controls/universal/ComboBox.qml
index 7552c164..4c5ecf74 100644
--- a/src/imports/controls/universal/ComboBox.qml
+++ b/src/imports/controls/universal/ComboBox.qml
@@ -53,6 +53,8 @@ T.ComboBox {
     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: parent.width
         text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
@@ -66,22 +68,40 @@ T.ComboBox {
         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 ? 0 : 12
-        rightPadding: control.mirrored ? 10 : 0
+    contentItem: T.TextField {
+        leftPadding: control.mirrored ? 1 : 12
+        rightPadding: control.mirrored ? 10 : 1
         topPadding: 5 - control.topPadding
         bottomPadding: 7 - control.bottomPadding
 
-        text: control.displayText
+        text: control.editable ? control.editText : control.displayText
+
+        enabled: control.editable
+        autoScroll: control.editable
+        readOnly: control.popup.visible
+        inputMethodHints: control.inputMethodHints
+        validator: control.validator
+
         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 {
@@ -90,11 +110,13 @@ T.ComboBox {
 
         border.width: control.flat ? 0 : 2 // ComboBoxBorderThemeThickness
         border.color: !control.enabled ? control.Universal.baseLowColor :
-                       control.down ? 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.down ? control.Universal.listMediumColor :
-                control.flat && control.hovered ? control.Universal.listLowColor : control.Universal.altMediumLowColor
+                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 {
@@ -103,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
         }