QQuickTextArea: resize background different when inside Flickable

When a TextArea is placed inside a Flickable (using the TextArea.flickable
property), the background is reparented to the Flickable. For this to
look good, the background should have the same size as the Flicable as
well, so it doesn't end up with the size of the TextArea, which can
be many pages tall.

Change-Id: I75ead02c712f337c7e743f17aa8810a040519173
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
(cherry picked from commit 257054f2cc6d79e763a12b350ffcc18787d0ac8c)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>

2 files changed, 38 insertions, 2 deletions

diff --git a/src/quicktemplates2/qquicktextarea.cpp b/src/quicktemplates2/qquicktextarea.cpp
index 56dc946d..d0a08c47 100644
--- a/src/quicktemplates2/qquicktextarea.cpp
+++ b/src/quicktemplates2/qquicktextarea.cpp
@@ -219,16 +219,25 @@ void QQuickTextAreaPrivate::resizeBackground()
 
     resizingBackground = true;
 
+    // When using the attached property TextArea.flickable, we reparent the background out
+    // of TextArea and into the Flickable since we don't want the background to move while
+    // flicking. This means that the size of the background should also follow the size of
+    // the Flickable rather than the size of the TextArea.
+    const auto flickable = qobject_cast<QQuickFlickable *>(background->parentItem());
+
     QQuickItemPrivate *p = QQuickItemPrivate::get(background);
     if (((!p->widthValid || !extra.isAllocated() || !extra->hasBackgroundWidth) && qFuzzyIsNull(background->x()))
             || (extra.isAllocated() && (extra->hasLeftInset || extra->hasRightInset))) {
+        const qreal bgWidth = flickable ? flickable->width() : width;
         background->setX(getLeftInset());
-        background->setWidth(width - getLeftInset() - getRightInset());
+        background->setWidth(bgWidth - getLeftInset() - getRightInset());
     }
+
     if (((!p->heightValid || !extra.isAllocated() || !extra->hasBackgroundHeight) && qFuzzyIsNull(background->y()))
             || (extra.isAllocated() && (extra->hasTopInset || extra->hasBottomInset))) {
+        const qreal bgHeight = flickable ? flickable->height() : height;
         background->setY(getTopInset());
-        background->setHeight(height - getTopInset() - getBottomInset());
+        background->setHeight(bgHeight - getTopInset() - getBottomInset());
     }
 
     resizingBackground = false;
diff --git a/tests/auto/controls/data/tst_textarea.qml b/tests/auto/controls/data/tst_textarea.qml
index 1e455ffc..ff4b76bb 100644
--- a/tests/auto/controls/data/tst_textarea.qml
+++ b/tests/auto/controls/data/tst_textarea.qml
@@ -75,6 +75,19 @@ TestCase {
     }
 
     Component {
+        id: flickableCustomBackground
+        Flickable {
+            width: 200
+            height: 200
+            TextArea.flickable: TextArea {
+                background: Rectangle {
+                    color: "green"
+                }
+            }
+        }
+    }
+
+    Component {
         id: signalSpy
         SignalSpy { }
     }
@@ -306,6 +319,20 @@ TestCase {
         compare(textArea.cursorPosition, center) // no change
     }
 
+    function test_flickableCustomBackground() {
+        // Test that the TextArea background item is parented out of the
+        // TextArea and into the Flicable, and that it has the same size
+        // as the flickable.
+        var flickable = createTemporaryObject(flickableCustomBackground, testCase)
+        verify(flickable)
+
+        var textArea = flickable.TextArea.flickable
+        verify(textArea)
+        verify(textArea.background)
+        compare(textArea.background.width, flickable.width)
+        compare(textArea.background.height, flickable.height)
+    }
+
     function test_warning() {
         ignoreWarning(Qt.resolvedUrl("tst_textarea.qml") + ":55:1: QML TestCase: TextArea must be attached to a Flickable")
         testCase.TextArea.flickable = null