Flickable scrollbar malfunctioning

Question

I have created a TextArea inside a flickable, and when I add lots of newlines the area scrolls as expected. However, although a scrollbar appears when I type more lines than the available height, if I try to drag the scrollbar it resets to fully colored (nothing to drag) and just generally misbehaves.

What is wrong with my scrollbar?

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    id: box
    width: 640
    height: 180
    visible: true
    title: qsTr("ScrollBar Mystery")

    Flickable {
        id: inputWrapper
        anchors.fill: parent

        ScrollBar.vertical: ScrollBar {
            id: scrollBar
            policy: ScrollBar.AlwaysOn
            anchors.left: box.right
        }
        Keys.onUpPressed: scrollBar.decrease()
        Keys.onDownPressed: scrollBar.increase()

        clip: true
         flickableDirection: Flickable.VerticalFlick
        function ensureVisible(r)
        {
            if (contentX >= r.x)
                contentX = r.x;
            else if (contentX+width <= r.x+r.width)
                contentX = r.x+r.width-width;
            if (contentY >= r.y)
                contentY = r.y;
            else if (contentY+height <= r.y+r.height)
                contentY = r.y+r.height-height;
        }
        TextEdit {
            id: input
            anchors.fill: parent
            text: ""
            focus: true
            wrapMode: TextEdit.Wrap
            onCursorRectangleChanged: inputWrapper.ensureVisible(cursorRectangle)
        }  // TextEdit
    }  // Flickable
}  // Window

Answer 1

you forget to set contentHeight and contentWidth

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    id: box
    width: 640
    height: 180
    visible: true
    title: qsTr("ScrollBar Mystery")

    Flickable {
        id: inputWrapper
        anchors.fill: parent
        contentHeight: input.implicitHeight
        contentWidth:  input.implicitWidth

        ScrollBar.vertical: ScrollBar {
            id: scrollBar
            policy: ScrollBar.AlwaysOn
            anchors.left: box.right
        }
        Keys.onUpPressed: scrollBar.decrease()
        Keys.onDownPressed: scrollBar.increase()

        clip: true
         flickableDirection: Flickable.VerticalFlick
        function ensureVisible(r)
        {
            if (contentX >= r.x)
                contentX = r.x;
            else if (contentX+width <= r.x+r.width)
                contentX = r.x+r.width-width;
            if (contentY >= r.y)
                contentY = r.y;
            else if (contentY+height <= r.y+r.height)
                contentY = r.y+r.height-height;
        }
        TextEdit {
            id: input
            anchors.fill: parent
            text: ""
            focus: true
            wrapMode: TextEdit.Wrap
            onCursorRectangleChanged: inputWrapper.ensureVisible(cursorRectangle)
        }  // TextEdit
    }  // Flickable
}  // Window