Spinbox: clip contentItem

If the text in a SpinBox is larger than its text field, then
the text is drawn outside of the SpinBox covering the
spinbox buttons.

This patch will set a clip on the SpinBoxes, to ensure
that the text is not drawn outside the bounds of the
content item.

The SpinBox implementation differs a bit from one style
to the next, which means that some styles will only
need to set a clip, while others will need a bit more
change. Especially the Basic style will need to expand
the size of the content item to make room for the
focus rect (which the other styles don't have, or
implement differently).

There are also two versions of the SpinBox; One that
has the up and down indicators placed on each side
of the content item, and another that has them collected
on only one side. It seems like the latter implementations
has done a copy/paste of the padding from the former, and
thereby has set a too large padding. This has also
been fixed, as it's related to the clipping bug.

Fixes: QTBUG-98355
Pick-to: 6.5 6.4
Change-Id: I2c1ce6d477cf809e2187fd80aecbc9edeb8e0c2d
Reviewed-by: Mitch Curtis <[email protected]>

8 files changed, 63 insertions, 67 deletions

diff --git a/src/quickcontrols/basic/SpinBox.qml b/src/quickcontrols/basic/SpinBox.qml
index 758472c5cb..cf4315e910 100644
--- a/src/quickcontrols/basic/SpinBox.qml
+++ b/src/quickcontrols/basic/SpinBox.qml
@@ -8,16 +8,13 @@ import QtQuick.Templates as T
 T.SpinBox {
     id: control
 
+    // Note: the width of the indicators are calculated into the padding
     implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
-                            contentItem.implicitWidth + 2 * padding +
-                            up.implicitIndicatorWidth +
-                            down.implicitIndicatorWidth)
-    implicitHeight: Math.max(implicitContentHeight + topPadding + bottomPadding,
-                             implicitBackgroundHeight,
-                             up.implicitIndicatorHeight,
-                             down.implicitIndicatorHeight)
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             up.implicitIndicatorHeight, down.implicitIndicatorHeight)
 
-    padding: 6
     leftPadding: padding + (control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0))
     rightPadding: padding + (control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0))
 
@@ -30,6 +27,8 @@ T.SpinBox {
     contentItem: TextInput {
         z: 2
         text: control.displayText
+        clip: width < implicitWidth
+        padding: 6
 
         font: control.font
         color: control.palette.text
@@ -43,10 +42,8 @@ T.SpinBox {
         inputMethodHints: control.inputMethodHints
 
         Rectangle {
-            x: -6 - (control.down.indicator ? 1 : 0)
-            y: -6
-            width: control.width - (control.up.indicator ? control.up.indicator.width - 1 : 0) - (control.down.indicator ? control.down.indicator.width - 1 : 0)
-            height: control.height
+            width: parent.width
+            height: parent.height
             visible: control.activeFocus
             color: "transparent"
             border.color: control.palette.highlight
diff --git a/src/quickcontrols/fusion/SpinBox.qml b/src/quickcontrols/fusion/SpinBox.qml
index 03fa470a32..1e7d05d7ce 100644
--- a/src/quickcontrols/fusion/SpinBox.qml
+++ b/src/quickcontrols/fusion/SpinBox.qml
@@ -10,18 +10,16 @@ import QtQuick.Controls.Fusion.impl
 T.SpinBox {
     id: control
 
+    // Note: the width of the indicators are calculated into the padding
     implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
-                            contentItem.implicitWidth + 2 * padding +
-                            Math.max(up.implicitIndicatorWidth,
-                                     down.implicitIndicatorWidth))
-    implicitHeight: Math.max(implicitContentHeight + topPadding + bottomPadding,
-                             implicitBackgroundHeight,
-                             up.implicitIndicatorHeight +
-                             down.implicitIndicatorHeight)
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             up.implicitIndicatorHeight + down.implicitIndicatorHeight)
 
     padding: 4
-    leftPadding: padding + (control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0))
-    rightPadding: padding + (control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0))
+    leftPadding: padding + (control.mirrored ? (up.indicator ? up.indicator.width : 0) : 0)
+    rightPadding: padding + (!control.mirrored ? (up.indicator ? up.indicator.width : 0) : 0)
 
     validator: IntValidator {
         locale: control.locale.name
@@ -43,6 +41,7 @@ T.SpinBox {
         readOnly: !control.editable
         validator: control.validator
         inputMethodHints: control.inputMethodHints
+        clip: width < implicitWidth
     }
 
     up.indicator: PaddedRectangle {
diff --git a/src/quickcontrols/imagine/SpinBox.qml b/src/quickcontrols/imagine/SpinBox.qml
index 973cc1d1d6..834f474344 100644
--- a/src/quickcontrols/imagine/SpinBox.qml
+++ b/src/quickcontrols/imagine/SpinBox.qml
@@ -9,14 +9,12 @@ import QtQuick.Controls.Imagine.impl
 T.SpinBox {
     id: control
 
+    // Note: the width of the indicators are calculated into the padding
     implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
-                            contentItem.implicitWidth + 2 * padding +
-                            up.implicitIndicatorWidth +
-                            down.implicitIndicatorWidth)
-    implicitHeight: Math.max(implicitContentHeight + topPadding + bottomPadding,
-                             implicitBackgroundHeight,
-                             up.implicitIndicatorHeight,
-                             down.implicitIndicatorHeight)
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             up.implicitIndicatorHeight, down.implicitIndicatorHeight)
 
     topPadding: background ? background.topPadding : 0
     leftPadding: (background ? background.leftPadding : 0) + (control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0))
@@ -49,6 +47,7 @@ T.SpinBox {
         readOnly: !control.editable
         validator: control.validator
         inputMethodHints: control.inputMethodHints
+        clip: width < implicitWidth
 
         NinePatchImage {
             z: -1
diff --git a/src/quickcontrols/ios/SpinBox.qml b/src/quickcontrols/ios/SpinBox.qml
index ed4e4c1bc7..11131a0db1 100644
--- a/src/quickcontrols/ios/SpinBox.qml
+++ b/src/quickcontrols/ios/SpinBox.qml
@@ -8,16 +8,14 @@ import QtQuick.Controls.impl
 
 T.SpinBox {
     id: control
+
+    // Note: the width of the indicators are calculated into the padding
     implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
-                            contentItem.implicitWidth + 2 * padding +
-                            up.implicitIndicatorWidth +
-                            down.implicitIndicatorWidth)
-    implicitHeight: Math.max(implicitContentHeight + topPadding + bottomPadding,
-                             implicitBackgroundHeight,
-                             up.implicitIndicatorHeight,
-                             down.implicitIndicatorHeight)
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             up.implicitIndicatorHeight, down.implicitIndicatorHeight)
 
-    padding: 0
     leftPadding: control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0)
     rightPadding: control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0)
 
@@ -42,6 +40,7 @@ T.SpinBox {
         readOnly: !control.editable
         validator: control.validator
         inputMethodHints: control.inputMethodHints
+        clip: width < implicitWidth
     }
 
     up.indicator: NinePatchImage {
diff --git a/src/quickcontrols/macos/SpinBox.qml b/src/quickcontrols/macos/SpinBox.qml
index 555b49eb32..dcc52f0ab2 100644
--- a/src/quickcontrols/macos/SpinBox.qml
+++ b/src/quickcontrols/macos/SpinBox.qml
@@ -8,9 +8,12 @@ import QtQuick.NativeStyle as NativeStyle
 T.SpinBox {
     id: control
 
-    implicitWidth: Math.max(implicitContentWidth + leftInset + rightInset)
-    implicitHeight: Math.max(implicitContentHeight, up.implicitIndicatorHeight + down.implicitIndicatorHeight)
-                    + topInset + bottomInset
+    // Note: the width of the indicators are calculated into the padding
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             up.implicitIndicatorHeight, down.implicitIndicatorHeight)
 
     spacing: 2
     rightPadding: up.implicitIndicatorWidth + spacing
@@ -31,7 +34,7 @@ T.SpinBox {
         selectedTextColor: control.palette.highlightedText
         horizontalAlignment: Qt.AlignLeft
         verticalAlignment: Qt.AlignVCenter
-        implicitWidth: 100 // From IB XCode
+        implicitWidth: Math.max(100 /* from IB XCode */, contentWidth + leftPadding + rightPadding)
 
         topPadding: 2
         bottomPadding: 2
diff --git a/src/quickcontrols/material/SpinBox.qml b/src/quickcontrols/material/SpinBox.qml
index 7529f8e9a0..591f5061fa 100644
--- a/src/quickcontrols/material/SpinBox.qml
+++ b/src/quickcontrols/material/SpinBox.qml
@@ -9,20 +9,18 @@ import QtQuick.Controls.Material.impl
 T.SpinBox {
     id: control
 
+    // Note: the width of the indicators are calculated into the padding
     implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
-                            contentItem.implicitWidth +
-                            up.implicitIndicatorWidth +
-                            down.implicitIndicatorWidth)
-    implicitHeight: Math.max(implicitContentHeight + topPadding + bottomPadding,
-                             implicitBackgroundHeight,
-                             up.implicitIndicatorHeight,
-                             down.implicitIndicatorHeight)
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             up.implicitIndicatorHeight, down.implicitIndicatorHeight)
 
     spacing: 6
     topPadding: 8
     bottomPadding: 16
-    leftPadding: (control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0))
-    rightPadding: (control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0))
+    leftPadding: control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0)
+    rightPadding: control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0)
 
     validator: IntValidator {
         locale: control.locale.name
@@ -45,6 +43,7 @@ T.SpinBox {
         readOnly: !control.editable
         validator: control.validator
         inputMethodHints: control.inputMethodHints
+        clip: width < implicitWidth
     }
 
     up.indicator: Item {
diff --git a/src/quickcontrols/universal/SpinBox.qml b/src/quickcontrols/universal/SpinBox.qml
index 07721c8712..ed233e0c10 100644
--- a/src/quickcontrols/universal/SpinBox.qml
+++ b/src/quickcontrols/universal/SpinBox.qml
@@ -9,20 +9,19 @@ import QtQuick.Controls.Universal
 T.SpinBox {
     id: control
 
+
+    // Note: the width of the indicators are calculated into the padding
     implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
-                            contentItem.implicitWidth + 16 +
-                            up.implicitIndicatorWidth +
-                            down.implicitIndicatorWidth)
-    implicitHeight: Math.max(implicitContentHeight + topPadding + bottomPadding,
-                             implicitBackgroundHeight,
-                             up.implicitIndicatorHeight,
-                             down.implicitIndicatorHeight)
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             up.implicitIndicatorHeight, down.implicitIndicatorHeight)
 
     // TextControlThemePadding + 2 (border)
     padding: 12
     topPadding: padding - 7
     leftPadding: padding + (control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0))
-    rightPadding: padding - 4 + (control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0))
+    rightPadding: padding + (control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0))
     bottomPadding: padding - 5
 
     Universal.theme: activeFocus ? Universal.Light : undefined
@@ -47,6 +46,7 @@ T.SpinBox {
         readOnly: !control.editable
         validator: control.validator
         inputMethodHints: control.inputMethodHints
+        clip: width < implicitWidth
     }
 
     up.indicator: Item {
diff --git a/src/quickcontrols/windows/SpinBox.qml b/src/quickcontrols/windows/SpinBox.qml
index 34fbfddbcf..982a5868a3 100644
--- a/src/quickcontrols/windows/SpinBox.qml
+++ b/src/quickcontrols/windows/SpinBox.qml
@@ -12,18 +12,15 @@ T.SpinBox {
                                     && down.indicator.hasOwnProperty("_qt_default")
     readonly property bool __notCustomizable: true
 
-    implicitWidth: Math.max(contentItem.implicitWidth + leftInset + rightInset,
-                            90 /* minimum */ )
-    implicitHeight: Math.max(contentItem.implicitHeight, up.implicitIndicatorHeight + down.implicitIndicatorHeight)
-                    + topInset + bottomInset
+    // Note: the indicators are inside the contentItem
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             up.implicitIndicatorHeight + down.implicitIndicatorHeight)
 
     spacing: 2
 
-    leftPadding: 0
-    topPadding: 0
-    rightPadding: rightInset
-    bottomPadding: 0
-
     validator: IntValidator {
         locale: control.locale.name
         bottom: Math.min(control.from, control.to)
@@ -38,16 +35,19 @@ T.SpinBox {
         selectedTextColor: control.palette.highlightedText
         horizontalAlignment: Qt.AlignLeft
         verticalAlignment: Qt.AlignVCenter
+        implicitWidth: Math.max(90 /* minimum */, contentWidth + leftPadding + rightPadding)
 
         topPadding: 0
         bottomPadding: 0
         leftPadding: 10
-        rightPadding: 10
+        rightPadding: up.indicator.width + 10
 
         readOnly: !control.editable
         validator: control.validator
         inputMethodHints: control.inputMethodHints
 
+        clip: width < implicitWidth
+
         readonly property bool __ignoreNotCustomizable: true
 
         // Since the indicators are embedded inside the TextField we need to avoid that