Issues with focus and Calendar

问题

For both Combobox and Calendar I've added a simple Custom ToggleButton. When the Window becomes small ComboBox's popup renders on top of other Card BUT in case of Calendar it stays behind other Cards:

When I click outside the ComboBox it closes the popup and sets the checked state of ToggleButton to false. In case of Calendar I wanted to set that in onFocusChanged event BUT that doesn't work! Here's the Calendar:

import QtQuick 2.9
import QtQuick.Controls 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.3
import QtQml 2.15
import "../Scripts/Constants.js" as Con

Item {
    id: root
    Layout.fillWidth: true
    Layout.preferredHeight: 20
    RowLayout{
        id: row
        anchors.fill: parent
        LineField{
            id: line
            label: "Date"
            text: Qt.formatDate(cal.selectedDate, "yyyy-MM-dd")
            isEnabled: false
            Layout.fillWidth: true
        }
        Toggle{
            id: toggle
            uncheckedPath: Con.uncheckedcalendarIcon
            checkedPath: Con.checkedCalendarIcon
        }
    }

    Calendar {
        id: cal
        y: row.y + 25
        x: 50
        visible: toggle.checked
        width: 200
        height: width
        style: CalendarStyle{
            gridVisible: false
            background: Card{}

            navigationBar: RowLayout{
                PathButton{
                    pathData: Con.leftIcon
                    hasToolTip: false
                    onClicked: cal.showPreviousMonth()
                }
                Rectangle{
                    Layout.fillWidth: true
                    Label{
                        text: styleData.title
                        anchors.centerIn: parent
                        font.bold: true
                        font.pixelSize: 14
                    }
                }
                PathButton{
                    pathData: Con.rightIcon
                    hasToolTip: false
                    onClicked: cal.showNextMonth()
                }
            }

            dayOfWeekDelegate: ColumnLayout{
                Rectangle{
                    height: 2
                    color: "lightblue"
                    Layout.preferredWidth: parent.width
                }
                Rectangle{
                    Layout.preferredHeight: 12
                    Layout.preferredWidth: parent.width
                    Text{
                        text: Qt.locale().dayName(styleData.dayOfWeek, Locale.ShortFormat)
                        font.bold: true
                        color: "gray"
                        //color: Qt.locale().today()? "green" : "gray"
                        font.pixelSize: 10
                        anchors.fill: parent
                        horizontalAlignment: Text.AlignHCenter
                    }
                }

                Rectangle{
                    height: 2
                    color: "lightblue"
                    Layout.preferredWidth: parent.width
                }
            }
            dayDelegate: Rectangle{
                radius: 30
                color: styleData.selected? "lightblue"  : "white"
                Label {
                    text: styleData.date.getDate()
                    anchors.centerIn: parent
                    font.bold: styleData.selected
                    font.italic: !(styleData.visibleMonth && styleData.valid)
                    color: styleData.selected? "white" : (styleData.visibleMonth && styleData.valid)? "black" : "grey"
                }
                MouseArea{
                    anchors.fill: parent
                    hoverEnabled: true
                    acceptedButtons: Qt.LeftButton
                    onHoveredChanged: parent.color = containsMouse? "lightgray" : "white"
                    //onClicked: styleData.selected = styleData.date
                }
            }
        }
        onFocusChanged: toggle.checked = false
    }
}

Inside dayDelegate I've added a mouse area to change the background on hover and with that I now can't select any date! Is there any built in property like hovered/containsMouse on Calendar to get rid of that MouseArea, if so what's the name of that property? Otherwise how can I select date onClicked?

In addition to this I still have some unresolved focusing issue with my Composite TextField and TeaxtArea controls, content formatting issue with Combobox and section, subsection summary/fotter problem in ListView.

EDIT

One more thing I forgot to mention, in my WPF app I'd Years/Decades in DatePicker:

Is it possible to have that in my qml Calendar?

来源：https://stackoverflow.com/questions/62736537/issues-with-focus-and-calendar