From 4510242651215eaf8a4954b035fa06d58ad8630a Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Mon, 18 Apr 2022 10:43:29 +0800
Subject: [PATCH] fix: stop propagation when drawer is opened

---
 .../antd/action/Action.Drawer.tsx             | 126 +++++++++---------
 .../record-picker/ReadPrettyRecordPicker.tsx  |   4 +-
 2 files changed, 69 insertions(+), 61 deletions(-)

diff --git a/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx b/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx
index c55451e149..da9bef2ce0 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx
@@ -21,67 +21,73 @@ export const ActionDrawer: ComposedActionDrawer = observer((props) => {
   return (
     <>
       {createPortal(
-        <Drawer
-          width={'50%'}
-          title={field.title}
-          {...others}
-          destroyOnClose
-          visible={visible}
-          onClose={() => setVisible(false)}
-          className={classNames(
-            others.className,
-            css`
-              &.nb-action-popup {
-                .ant-drawer-content {
-                  background: #f0f2f5;
-                }
-              }
-              &.nb-record-picker-selector {
-                .nb-block-item {
-                  margin-bottom: 24px;
-                  .general-schema-designer {
-                    top: -8px;
-                    bottom: -8px;
-                    left: -8px;
-                    right: -8px;
-                  }
-                }
-              }
-            `,
-          )}
-          footer={
-            footerSchema && (
-              <div
-                className={css`
-                  display: flex;
-                  justify-content: flex-end;
-                  width: 100%;
-                  .ant-btn {
-                    margin-right: 8px;
-                  }
-                `}
-              >
-                <RecursionField
-                  basePath={field.address}
-                  schema={schema}
-                  onlyRenderProperties
-                  filterProperties={(s) => {
-                    return s['x-component'] === footerNodeName;
-                  }}
-                />
-              </div>
-            )
-          }
+        <div
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
         >
-          <RecursionField
-            basePath={field.address}
-            schema={schema}
-            onlyRenderProperties
-            filterProperties={(s) => {
-              return s['x-component'] !== footerNodeName;
-            }}
-          />
-        </Drawer>,
+          <Drawer
+            width={'50%'}
+            title={field.title}
+            {...others}
+            destroyOnClose
+            visible={visible}
+            onClose={() => setVisible(false)}
+            className={classNames(
+              others.className,
+              css`
+                &.nb-action-popup {
+                  .ant-drawer-content {
+                    background: #f0f2f5;
+                  }
+                }
+                &.nb-record-picker-selector {
+                  .nb-block-item {
+                    margin-bottom: 24px;
+                    .general-schema-designer {
+                      top: -8px;
+                      bottom: -8px;
+                      left: -8px;
+                      right: -8px;
+                    }
+                  }
+                }
+              `,
+            )}
+            footer={
+              footerSchema && (
+                <div
+                  className={css`
+                    display: flex;
+                    justify-content: flex-end;
+                    width: 100%;
+                    .ant-btn {
+                      margin-right: 8px;
+                    }
+                  `}
+                >
+                  <RecursionField
+                    basePath={field.address}
+                    schema={schema}
+                    onlyRenderProperties
+                    filterProperties={(s) => {
+                      return s['x-component'] === footerNodeName;
+                    }}
+                  />
+                </div>
+              )
+            }
+          >
+            <RecursionField
+              basePath={field.address}
+              schema={schema}
+              onlyRenderProperties
+              filterProperties={(s) => {
+                return s['x-component'] !== footerNodeName;
+              }}
+            />
+          </Drawer>
+        </div>,
         document.body,
       )}
     </>
diff --git a/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx b/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx
index f118d8c323..4ff84d6845 100644
--- a/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx
+++ b/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx
@@ -27,7 +27,9 @@ export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
               return (
                 <span>
                   <a
-                    onClick={() => {
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
                       setVisible(true);
                       setRecord(record);
                     }}