Modified DropPanel cancel MouseArea creation

Previous mechanism was exposing possible bug in Qt which would prevent
clicks from work on ToolStrip buttons after cancel MouseArea was hidden.

src/QmlControls/DropPanel.qml

@@ -47,6 +47,7 @@ Item {
     property alias  _dropDownComponent: dropDownLoader.sourceComponent
     property real   _viewportMaxTop:    0
     property real   _viewportMaxBottom: parent.parent.height - parent.y
+    property var    _dropPanelCancel
 
     function show(panelEdgeTopPoint, panelEdgeHeight, panelComponent) {
         _dropEdgeTopPoint = panelEdgeTopPoint
@@ -54,9 +55,13 @@ Item {
         _dropDownComponent = panelComponent
         _calcPositions()
         visible = true
+        _dropPanelCancel = dropPanelCancelComponent.createObject(toolStrip.parent)
     }
 
     function hide() {
+        if (_dropPanelCancel) {
+            _dropPanelCancel.destroy()
+        }
         if (visible) {
             visible = false
             _dropDownComponent = undefined
@@ -101,6 +106,17 @@ Item {
 
     QGCPalette { id: qgcPal }
 
+    Component {
+        // Overlay which is used to cancel the panel when the user clicks away
+        id: dropPanelCancelComponent
+
+        MouseArea {
+            anchors.fill:   parent
+            z:              toolStrip.z - 1
+            onClicked:      dropPanel.hide()
+        }
+    }
+
     Item {
         id: dropDownItem
 

src/QmlControls/ToolStrip.qml

@@ -47,16 +47,6 @@ Rectangle {
         }
     }
 
-    MouseArea {
-        x:                  -_root.x
-        y:                  -_root.y
-        width:              _root.parent.width
-        height:             _root.parent.height
-        visible:            dropPanel.visible
-        onClicked:          dropPanel.hide()
-        preventStealing:    true
-    }
-
     Column {
         id:                 buttonStripColumn
         anchors.margins:    ScreenTools.defaultFontPixelWidth  / 2