Text inside of TextInput is rendered on top and beyond the border even with specified padding

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

Window {
    visible: true
    width: 640
    height: 480
    color: "#606060"

    TextInput {
        id: textInput
        anchors.centerIn: parent
        z: 2
        width: 280
        height: 60
        horizontalAlignment: Qt.AlignHCenter
        verticalAlignment: Qt.AlignVCenter
        readOnly: false
        selectByMouse: false
        activeFocusOnPress: false
        clip: true
        font.pixelSize: 48
        color: "white"
        text: "This is it!#"
        leftPadding: 40
        rightPadding: 40

        Rectangle {
            id: textInputArea
            color: "grey"
            border.color: "black"
            border.width: 1
            x: 0
            y: 0
            z: -1
            width: textInput.width
            height: textInput.height
        }

        TapHandler {
            id: tapHandler
            acceptedDevices: PointerDevice.Mouse
            enabled: true
            onTapped: textInput.forceActiveFocus()
        }
    }
}