GH-1919 fix unexpected dialog close (#2828)

* fix: seperate dialog backdrop and wrapper

* test: update snapshot

webapp/src/components/__snapshots__/cardDialog.test.tsx.snap

@@ -5,6 +5,9 @@ exports[`components/cardDialog already following card 1`] = `
   <div
     class="Dialog dialog-back cardDialog"
   >
+    <div
+      class="backdrop"
+    />
     <div
       class="wrapper"
     >
@@ -285,6 +288,9 @@ exports[`components/cardDialog return a cardDialog readonly 1`] = `
   <div
     class="Dialog dialog-back cardDialog"
   >
+    <div
+      class="backdrop"
+    />
     <div
       class="wrapper"
     >
@@ -394,6 +400,9 @@ exports[`components/cardDialog return cardDialog menu content 1`] = `
   <div
     class="Dialog dialog-back cardDialog"
   >
+    <div
+      class="backdrop"
+    />
     <div
       class="wrapper"
     >
@@ -783,6 +792,9 @@ exports[`components/cardDialog return cardDialog menu content and cancel delete
   <div
     class="Dialog dialog-back cardDialog"
   >
+    <div
+      class="backdrop"
+    />
     <div
       class="wrapper"
     >
@@ -1063,6 +1075,9 @@ exports[`components/cardDialog should match snapshot 1`] = `
   <div
     class="Dialog dialog-back cardDialog"
   >
+    <div
+      class="backdrop"
+    />
     <div
       class="wrapper"
     >
@@ -1343,6 +1358,9 @@ exports[`components/cardDialog should match snapshot without permissions 1`] = `
   <div
     class="Dialog dialog-back cardDialog"
   >
+    <div
+      class="backdrop"
+    />
     <div
       class="wrapper"
     >

webapp/src/components/__snapshots__/confirmationDialogBox.test.tsx.snap

@@ -5,6 +5,9 @@ exports[`/components/confirmationDialogBox confirmDialog should match snapshot 1
   <div
     class="Dialog dialog-back confirmation-dialog-box"
   >
+    <div
+      class="backdrop"
+    />
     <div
       class="wrapper"
     >
@@ -77,6 +80,9 @@ exports[`/components/confirmationDialogBox confirmDialog with Confirm Button Tex
   <div
     class="Dialog dialog-back confirmation-dialog-box"
   >
+    <div
+      class="backdrop"
+    />
     <div
       class="wrapper"
     >

webapp/src/components/__snapshots__/dialog.test.tsx.snap

@@ -5,6 +5,9 @@ exports[`components/dialog should match snapshot 1`] = `
   <div
     class="Dialog dialog-back undefined"
   >
+    <div
+      class="backdrop"
+    />
     <div
       class="wrapper"
     >
@@ -43,6 +46,9 @@ exports[`components/dialog should return dialog and click on cancel button 1`] =
   <div
     class="Dialog dialog-back undefined"
   >
+    <div
+      class="backdrop"
+    />
     <div
       class="wrapper"
     >

webapp/src/components/boardTemplateSelector/__snapshots__/boardTemplateSelectorItem.test.tsx.snap

@@ -145,6 +145,9 @@ exports[`components/boardTemplateSelector/boardTemplateSelectorItem should trigg
     <div
       class="Dialog dialog-back DeleteBoardDialog"
     >
+      <div
+        class="backdrop"
+      />
       <div
         class="wrapper"
       >

webapp/src/components/dialog.scss

@@ -8,11 +8,17 @@
         z-index: 200;
     }
 
-    .wrapper {
+    .backdrop {
-        position: absolute;
+        position: fixed;
+        z-index: -1;
         width: 100%;
         height: 100%;
         background-color: rgba(var(--center-channel-color-rgb), 0.5);
+    }
+
+    .wrapper {
+        width: 100%;
+        height: 100%;
         display: flex;
         align-items: center;
         justify-content: center;

webapp/src/components/dialog.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React from 'react'
+import React, {useRef} from 'react'
 import {useIntl} from 'react-intl'
 import {useHotkeys} from 'react-hotkeys-hook'
 
@@ -31,14 +31,25 @@ const Dialog = (props: Props) => {
 
     useHotkeys('esc', () => props.onClose())
 
+    const isBackdropClickedRef = useRef(false)
+
     return (
         <div className={`Dialog dialog-back ${props.className}`}>
+            <div className='backdrop'/>
             <div
                 className='wrapper'
                 onClick={(e) => {
                     e.stopPropagation()
-                    if (e.target === e.currentTarget) {
+                    if(!isBackdropClickedRef.current){
-                        props.onClose()
+                        return
+                    }
+                    isBackdropClickedRef.current = false
+                    props.onClose()
+        
+                }}
+                onMouseDown={(e) => {
+                    if(e.target === e.currentTarget){
+                        isBackdropClickedRef.current = true
                     }
                 }}
             >

webapp/src/components/shareBoard/__snapshots__/shareBoard.test.tsx.snap

@@ -5,6 +5,9 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy l
   <div
     class="Dialog dialog-back ShareBoardDialog"
   >
+    <div
+      class="backdrop"
+    />
     <div
       class="wrapper"
     >
@@ -1213,6 +1216,9 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Select
   <div
     class="Dialog dialog-back ShareBoardDialog"
   >
+    <div
+      class="backdrop"
+    />
     <div
       class="wrapper"
     >
@@ -1410,6 +1416,9 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Select
   <div
     class="Dialog dialog-back ShareBoardDialog"
   >
+    <div
+      class="backdrop"
+    />
     <div
       class="wrapper"
     >
@@ -1729,6 +1738,9 @@ exports[`src/components/shareBoard/shareBoard return shareBoard, and click switc
   <div
     class="Dialog dialog-back ShareBoardDialog"
   >
+    <div
+      class="backdrop"
+    />
     <div
       class="wrapper"
     >
@@ -1975,6 +1987,9 @@ exports[`src/components/shareBoard/shareBoard return shareBoardComponent and cli
   <div
     class="Dialog dialog-back ShareBoardDialog"
   >
+    <div
+      class="backdrop"
+    />
     <div
       class="wrapper"
     >
@@ -2221,6 +2236,9 @@ exports[`src/components/shareBoard/shareBoard should match snapshot 1`] = `
   <div
     class="Dialog dialog-back ShareBoardDialog"
   >
+    <div
+      class="backdrop"
+    />
     <div
       class="wrapper"
     >
@@ -2444,6 +2462,9 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
   <div
     class="Dialog dialog-back ShareBoardDialog"
   >
+    <div
+      class="backdrop"
+    />
     <div
       class="wrapper"
     >
@@ -2667,6 +2688,9 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
   <div
     class="Dialog dialog-back ShareBoardDialog"
   >
+    <div
+      class="backdrop"
+    />
     <div
       class="wrapper"
     >
@@ -2890,6 +2914,9 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
   <div
     class="Dialog dialog-back ShareBoardDialog"
   >
+    <div
+      class="backdrop"
+    />
     <div
       class="wrapper"
     >