Material: fix placeholder text alignment

The placeholder text should always be aligned to the left
according to my tests on native Android via an emulator.

Fixes: QTBUG-113172
Pick-to: 6.5 6.5.1
Change-Id: I75ae31e1e6b9846d90ab5034c43f8684698e0ab7
Reviewed-by: Oliver Eftevaag <oliver.eftevaag@qt.io>

2 files changed, 96 insertions, 15 deletions

diff --git a/tests/auto/quickcontrols/qquickmaterialstyle/data/tst_material.qml b/tests/auto/quickcontrols/qquickmaterialstyle/data/tst_material.qml
index 06098f2fbb..2a3c31361d 100644
--- a/tests/auto/quickcontrols/qquickmaterialstyle/data/tst_material.qml
+++ b/tests/auto/quickcontrols/qquickmaterialstyle/data/tst_material.qml
@@ -964,7 +964,54 @@ TestCase {
         TextArea {}
     }
 
-    function test_placeholderText() {
+    function test_textFieldPlaceholderTextHorizontalAlignment_data() {
+        return [
+            { tag: "AlignLeft", horizontalAlignment: TextField.AlignLeft },
+            { tag: "AlignHCenter", horizontalAlignment: TextField.AlignHCenter },
+            { tag: "AlignRight", horizontalAlignment: TextField.AlignRight }
+        ]
+    }
+
+    function test_textFieldPlaceholderTextHorizontalAlignment(data) {
+        // The placeholder text should always be near the left side of the TextField, regardless of its horizontalAlignment.
+        let textField = createTemporaryObject(textFieldComponent, testCase, {
+            placeholderText: "TextField",
+            horizontalAlignment: data.horizontalAlignment
+        })
+        verify(textField)
+        let placeholderTextItem = textField.children[0]
+        verify(placeholderTextItem as MaterialImpl.FloatingPlaceholderText)
+        compare(placeholderTextItem.horizontalAlignment, TextField.AlignLeft)
+
+        textField.forceActiveFocus()
+        compare(placeholderTextItem.horizontalAlignment, TextField.AlignLeft)
+        textField.destroy()
+    }
+
+    function test_textAreaPlaceholderTextHorizontalAlignment_data() {
+        return [
+            { tag: "AlignLeft", horizontalAlignment: TextArea.AlignLeft },
+            { tag: "AlignHCenter", horizontalAlignment: TextArea.AlignHCenter },
+            { tag: "AlignRight", horizontalAlignment: TextArea.AlignRight }
+        ]
+    }
+
+    function test_textAreaPlaceholderTextHorizontalAlignment(data) {
+        // The placeholder text should always be near the left side of the TextArea, regardless of its horizontalAlignment.
+        let textArea = createTemporaryObject(textAreaComponent, testCase, {
+            placeholderText: "TextArea",
+            horizontalAlignment: data.horizontalAlignment
+        })
+        verify(textArea)
+        let placeholderTextItem = textArea.children[0]
+        verify(placeholderTextItem as MaterialImpl.FloatingPlaceholderText)
+        compare(placeholderTextItem.horizontalAlignment, TextArea.AlignLeft)
+
+        textArea.forceActiveFocus()
+        compare(placeholderTextItem.horizontalAlignment, TextArea.AlignLeft)
+    }
+
+    function test_placeholderTextPos() {
         {
             // The non-floating placeholder text should be in the middle of TextField regardless of its height.
             let textField = createTemporaryObject(textFieldComponent, testCase, { placeholderText: "TextField" })
diff --git a/tests/manual/quickcontrols/material/pages/TextAreaPage.qml b/tests/manual/quickcontrols/material/pages/TextAreaPage.qml
index f6836e2a83..f24f4564f1 100644
--- a/tests/manual/quickcontrols/material/pages/TextAreaPage.qml
+++ b/tests/manual/quickcontrols/material/pages/TextAreaPage.qml
@@ -7,6 +7,7 @@ import QtQuick.Layouts
 import ".."
 
 Page {
+    id: root
     topPadding: Constants.pageTopPadding
 
 //    Component.onCompleted: Material.background = "red"
@@ -101,28 +102,61 @@ Page {
                 Material.containerStyle: layout.containerStyle
             }
         }
-    }
 
-    ColumnLayout {
-        width: parent.width
+        TextArea {
+            text: "AlignLeft"
+            placeholderText: "AlignLeft"
+            horizontalAlignment: TextArea.AlignLeft
+            // Make it a big bigger so it's easier to see the effects of alignment.
+            width: implicitWidth + 30
 
-        Label {
-            text: "Filled"
+            Material.containerStyle: layout.containerStyle
         }
-        TextAreaFlow {
-            containerStyle: Material.Filled
 
-            Layout.fillWidth: true
-            Layout.bottomMargin: 40
+        TextArea {
+            text: "AlignHCenter"
+            placeholderText: "AlignMiddle"
+            horizontalAlignment: TextArea.AlignMiddle
+            width: implicitWidth + 30
+
+            Material.containerStyle: layout.containerStyle
         }
 
-        Label {
-            text: "Outlined"
+        TextArea {
+            text: "AlignRight"
+            placeholderText: "AlignRight"
+            horizontalAlignment: TextArea.AlignRight
+            width: implicitWidth + 30
+
+            Material.containerStyle: layout.containerStyle
         }
-        TextAreaFlow {
-            containerStyle: Material.Outlined
+    }
 
-            Layout.fillWidth: true
+    ScrollView {
+        id: scrollView
+        anchors.fill: parent
+
+        ColumnLayout {
+            width: scrollView.availableWidth
+
+            Label {
+                text: "Filled"
+            }
+            TextAreaFlow {
+                containerStyle: Material.Filled
+
+                Layout.fillWidth: true
+                Layout.bottomMargin: 40
+            }
+
+            Label {
+                text: "Outlined"
+            }
+            TextAreaFlow {
+                containerStyle: Material.Outlined
+
+                Layout.fillWidth: true
+            }
         }
     }
 }