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.

Pick-to: 5.15
Change-Id: I75ead02c712f337c7e743f17aa8810a040519173
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

2 files changed, 38 insertions, 2 deletions

diff --git a/src/quicktemplates2/qquicktextarea.cpp b/src/quicktemplates2/qquicktextarea.cpp
index af736f21..3495cb02 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 be889c44..e9e1e2e2 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 { }
     }
@@ -324,6 +337,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