My Custom Keypad is not working properly in QML

I have a requirement to develop a custom keyboard in Qml. When I click on "Caps ON" key, the button text should change to capital letter from small case letter.

Here, I am facing two issues

If I click on "Caps ON" button continuously (say, 10 - 15 times), some of the buttons in the keypad are hiding. The text on Caps button is not showing properly for "Caps Off". I don't understand what could be the reason.

Can someone please help me on this

Please find the Code below main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
id: root
visible: true
width: 1024
height: 600
title: qsTr("Hello World")

ParameterAlphaNumericComponent {
    parameterWidth: root.width
    parameterHeight: 100
    parameterValue: "100"
}
}

ParameterAlphaNumericComponent.qml

import QtQuick 2.12
import QtQuick.Controls 2.12

Item {
width: parameterWidth
height: parameterHeight

property int parameterWidth
property int parameterHeight
property string parameterValue: "0"
property int parameterReadOnly: 0

Rectangle {
    anchors.fill: parent
    color: parameterReadOnly === 0 ? "white" : "transparent"

    TextField {
        id: parameterValueText
        anchors.fill: parent
        text: parameterValue
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: TextInput.AlignHCenter
        color: "black"
        font.pixelSize: 13
        readOnly: true

        background: Rectangle {
            radius: 2
            border.color: parameterReadOnly === 0 ? "grey" : "transparent"
            border.width: 2
            color: parameterReadOnly === 0 ? "white" : "transparent"
        }
        onPressed: parameterReadOnly === 0 ? popup.open() : ""
    }
}

Popup {
    id: popup
    parent: Overlay.overlay
    anchors.centerIn: parent
    width: 800
    height: 300
    modal: true
    focus: true
    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent

    AlphaNumericKeypadLayout_1 {
        anchors.centerIn: parent
        binaryKeyPadWidth: popup.width
        binaryKeyPadHeight: popup.height
        keyPadValue: parameterValue
    }
} //End of popup
}

AlphaNumericKeypadLayout_1.qml

import QtQuick 2.0
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12

Item {
id: alphaNumericKeypad
width: binaryKeyPadWidth
height: binaryKeyPadHeight

property int binaryKeyPadWidth
property int binaryKeyPadHeight
property string keyPadValue: ""
property bool capsON: false

function getActualValue( percent ,  value) {
    var percentageValue = Math.round((percent*value)/100);
    return percentageValue;
}

Rectangle {
    anchors.fill: parent
    color: "black"

    ColumnLayout {
        id: columnLayout

        property int buttonHeight: 40
        property int buttonWidth: 15

        anchors {
            fill: parent
            topMargin: 5
            leftMargin: 5
            rightMargin: 5
            bottomMargin: 5
        }

        RowLayout {
            Layout.preferredWidth: parent.width
            Layout.preferredHeight: columnLayout.buttonHeight
            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
            spacing: 8

            Rectangle {
                implicitWidth: getActualValue(65, binaryKeyPadWidth)
                implicitHeight: columnLayout.buttonHeight
                border.width: 2
                color: "white"

                TextField {
                    id: textInput
                    anchors.fill: parent
                    text: keyPadValue
                    font.pixelSize: 12
                    verticalAlignment: Qt.AlignVCenter
                    horizontalAlignment: Text.AlignLeft
                    color: "black"
                    cursorVisible: true
                }
            }

            Button {
                id: leftShift
                implicitWidth: getActualValue(9, binaryKeyPadWidth)
                implicitHeight: columnLayout.buttonHeight
                Layout.alignment :Qt.AlignHCenter
                font.bold: true
                text: "<-"
            }

            Button {
                id: rightShift
                implicitWidth: getActualValue(9, binaryKeyPadWidth)
                implicitHeight: columnLayout.buttonHeight
                Layout.alignment :Qt.AlignHCenter
                font.bold: true
                text: "->"
            }

            Button {
                id: cancelBtn
                implicitWidth: getActualValue(9, binaryKeyPadWidth)
                implicitHeight: columnLayout.buttonHeight
                Layout.alignment :Qt.AlignHCenter
                font.bold: true
                text: "X"
            }
        }

        RowLayout {
            Layout.preferredWidth: parent.width
            Layout.preferredHeight: columnLayout.buttonHeight
            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
            spacing: 5

            Button {
                implicitWidth: getActualValue(8, binaryKeyPadWidth)
                implicitHeight: columnLayout.buttonHeight
                Layout.alignment :Qt.AlignHCenter
                font.bold: true
                text: capsON === true ? "Q" : "q"
            }
        }

        RowLayout {
            Layout.preferredWidth: parent.width
            Layout.preferredHeight: columnLayout.buttonHeight
            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
            spacing: 5

            Button {
                implicitWidth: getActualValue(20, binaryKeyPadWidth)
                implicitHeight: columnLayout.buttonHeight
                Layout.alignment :Qt.AlignHCenter
                font.bold: true
                text: capsON === true ? "Caps Off" : "Caps On"
                onReleased: {
                    if(capsON === false)
                        capsON = true
                    else
                        capsON = false
                }
            }
        }
    }
}

The final Keyboard looks like

After 15 to 10 clicks on "Caps On" button, the other buttons background color and text color is changing