DatePicker: don't propagate mouse events to underlying controls

components/DatePicker.qml

@@ -28,6 +28,7 @@
 
 import QtQuick 2.9
 import QtQuick.Controls 1.2
+import QtQuick.Controls 2.2 as QtQuickControls2
 import QtQuick.Layouts 1.2
 import QtGraphicalEffects 1.0
 import QtQuick.Controls.Styles 1.2
@@ -37,8 +38,7 @@ import "effects/" as MoneroEffects
 
 Item {
     id: datePicker
-    z: parent.z + 1
+    readonly property alias expanded: popup.visible
-    property bool expanded: false
     property date currentDate
     property bool showCurrentDate: true
     property color backgroundColor : MoneroComponents.Style.appWindowBorderColor
@@ -52,19 +52,6 @@ Item {
 
     onExpandedChanged: if(expanded) appWindow.currentItem = datePicker
 
-    function hide() { datePicker.expanded = false }
-    function containsPoint(px, py) {
-        if(px < 0)
-            return false
-        if(px > width)
-            return false
-        if(py < 0)
-            return false
-        if(py > height + calendarRect.height)
-            return false
-        return true
-    }
-
     Rectangle {
         id: inputLabelRect
         color: "transparent"
@@ -253,7 +240,7 @@ Item {
 
                 MouseArea {
                     anchors.fill: parent
-                    onClicked: datePicker.expanded = !datePicker.expanded
+                    onClicked: datePicker.expanded ? popup.close() : popup.open()
                     hoverEnabled: true
                     cursorShape: Qt.PointingHandCursor
                 }
@@ -261,12 +248,16 @@ Item {
         }
     }
 
+    QtQuickControls2.Popup {
+        id: popup
+        padding: 0
+
         Rectangle {
             id: calendarRect
-        anchors.left: parent.left
+            width: head.width
-        anchors.right: parent.right
+            x: head.x
-        anchors.top: head.bottom
+            y: head.y + head.height + 10
-        anchors.topMargin: 10
+
             color: MoneroComponents.Style.middlePanelBackgroundColor
             border.width: 1
             border.color: MoneroComponents.Style.appWindowBorderColor
@@ -277,6 +268,10 @@ Item {
                 NumberAnimation { duration: 100; easing.type: Easing.InQuad }
             }
 
+            MouseArea {
+                anchors.fill: parent
+            }
+
             Rectangle {
                 anchors.left: parent.left
                 anchors.right: parent.right
@@ -348,7 +343,7 @@ Item {
                             onClicked: {
                                 if(styleData.visibleMonth) {
                                     currentDate = styleData.date
-                                datePicker.expanded = false
+                                    popup.close()
                                 } else {
                                     var date = styleData.date
                                     if(date.getMonth() > calendar.visibleMonth)
@@ -456,4 +451,5 @@ Item {
                 }
             }
         }
+    }
 }

pages/History.qml

@@ -181,7 +181,6 @@ Rectangle {
             Layout.rightMargin: sideMargin
             columns: 2
             columnSpacing: 20
-            z: 6
 
             MoneroComponents.DatePicker {
                 id: fromDatePicker