Material: fix TextArea decorations when in a Flickable

This patch fixes the following issues when the Material TextArea is
attached to a Flickable:
- Floating placeholder text scrolls with the Flickable.
- When text is cleared without the control having focus:
  - Floating placeholder text is positioned incorrectly.
  - The floating text background outline gap is still open.
- The background outline color is incorrect when the control has focus
  (used primaryTextColor instead of accentColor).

Task-number: QTBUG-112650
Change-Id: Icfa3517e4abcb1209ea2291dabdec225011f19ef
Reviewed-by: Richard Moe Gustavsen <richard.gustavsen@qt.io>
(cherry picked from commit 2d99c70f982da92c70c022551cf456877141a5c8)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>

2 files changed, 60 insertions, 2 deletions

diff --git a/tests/auto/quickcontrols/qquickmaterialstyle/data/tst_material.qml b/tests/auto/quickcontrols/qquickmaterialstyle/data/tst_material.qml
index d85ddc7a44..06098f2fbb 100644
--- a/tests/auto/quickcontrols/qquickmaterialstyle/data/tst_material.qml
+++ b/tests/auto/quickcontrols/qquickmaterialstyle/data/tst_material.qml
@@ -978,15 +978,61 @@ TestCase {
         }
 
         {
-            // The non-floating placeholder text should be near the top of TextArea while it has room, but when it
-            // doesn't have room, it should start behaving like TextField's.
+            // The non-floating placeholder text should be near the top of TextArea while it has room...
             let textArea = createTemporaryObject(textAreaComponent, testCase, { placeholderText: "TextArea" })
             verify(textArea)
             let placeholderTextItem = textArea.children[0]
             verify(placeholderTextItem as MaterialImpl.FloatingPlaceholderText)
             compare(placeholderTextItem.y, (placeholderTextItem.controlImplicitBackgroundHeight - placeholderTextItem.largestHeight) / 2)
+
+            // ... also when it has a lot of room...
+            textArea.height = 200
+            compare(placeholderTextItem.y, (placeholderTextItem.controlImplicitBackgroundHeight - placeholderTextItem.largestHeight) / 2)
+
+            // ... but when it doesn't have room, it should start behaving like TextField's.
             textArea.height = 10
             compare(placeholderTextItem.y, (textArea.height - placeholderTextItem.height) / 2)
         }
     }
+
+    Component {
+        id: flickableTextAreaComponent
+
+        Flickable {
+            anchors.horizontalCenter: parent.horizontalCenter
+            y: 20
+            width: 180
+            height: 100
+
+            TextArea.flickable: TextArea {
+                placeholderText: "Type something..."
+                text: "a\nb\nc\nd\ne\nf\ng\nh\ni\nj\nk\nl\nm\nn"
+            }
+        }
+    }
+
+    function test_placeholderTextInFlickable() {
+        let flickable = createTemporaryObject(flickableTextAreaComponent, testCase)
+        verify(flickable)
+
+        let textArea = flickable.TextArea.flickable
+        verify(textArea)
+        let placeholderTextItem = flickable.children[2]
+        verify(placeholderTextItem as MaterialImpl.FloatingPlaceholderText)
+
+        // The placeholder text should always float at a fixed position at the top
+        // when text has been set, even when it's in a Flickable.
+        flickable.contentY = -50
+        compare(placeholderTextItem.y, -Math.floor(placeholderTextItem.largestHeight / 2))
+        flickable.contentY = 0
+
+        // When the text is cleared, it shouldn't float.
+        flickable.height = 160
+        textArea.text = ""
+        compare(placeholderTextItem.y, (placeholderTextItem.controlImplicitBackgroundHeight - placeholderTextItem.largestHeight) / 2)
+        // The background outline gap should be closed.
+        let textContainer = flickable.children[1]
+        verify(textContainer as MaterialImpl.MaterialTextContainer)
+        compare(textContainer.focusAnimationProgress, 0)
+    }
 }
diff --git a/tests/manual/quickcontrols/material/pages/TextAreaPage.qml b/tests/manual/quickcontrols/material/pages/TextAreaPage.qml
index 080eeab5e1..f6836e2a83 100644
--- a/tests/manual/quickcontrols/material/pages/TextAreaPage.qml
+++ b/tests/manual/quickcontrols/material/pages/TextAreaPage.qml
@@ -89,6 +89,18 @@ Page {
 
             Material.containerStyle: layout.containerStyle
         }
+
+        Flickable {
+            width: 200
+            height: 100
+
+            TextArea.flickable: TextArea {
+                placeholderText: "placeholderText"
+                text: "a\nb\nc\nd\ne\nf\ng\nh\ni\nj\nk\nl\nm\nn"
+
+                Material.containerStyle: layout.containerStyle
+            }
+        }
     }
 
     ColumnLayout {