fix: drag issue in quick popup add action for association field (#6112)

packages/core/client/src/modules/fields/component/Select/selectComponentFieldSettings.tsx

@@ -192,6 +192,9 @@ const quickCreate: any = {
               title: "{{t('Add new')}}",
               // 'x-designer': 'Action.Designer',
               'x-toolbar': 'ActionSchemaToolbar',
+              'x-toolbar-props': {
+                draggable: false,
+              },
               'x-settings': 'actionSettings:addNew',
               'x-component': 'Action',
               'x-decorator': 'ACLActionProvider',

packages/core/client/src/schema-component/antd/association-field/AssociationSelect.tsx

@@ -14,9 +14,15 @@ import { uid } from '@formily/shared';
 import { Space, message } from 'antd';
 import { isFunction } from 'mathjs';
 import { isEqual } from 'lodash';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ClearCollectionFieldContext, RecordProvider, useAPIClient, useCollectionRecordData } from '../../../';
+import {
+  ClearCollectionFieldContext,
+  RecordProvider,
+  useAPIClient,
+  useCollectionRecordData,
+  SchemaComponentContext,
+} from '../../../';
 import { isVariable } from '../../../variables/utils/isVariable';
 import { getInnermostKeyAndValue } from '../../common/utils/uitls';
 import { RemoteSelect, RemoteSelectProps } from '../remote-select';
@@ -69,6 +75,8 @@ const InternalAssociationSelect = observer(
     const api = useAPIClient();
     const resource = api.resource(collectionField.target);
     const recordData = useCollectionRecordData();
+    const schemaComponentCtxValue = useContext(SchemaComponentContext);
+
     useEffect(() => {
       const initValue = isVariable(field.value) ? undefined : field.value;
       const value = Array.isArray(initValue) ? initValue.filter(Boolean) : initValue;
@@ -149,19 +157,21 @@ const InternalAssociationSelect = observer(
           ></RemoteSelect>
 
           {addMode === 'modalAdd' && (
-            <RecordProvider isNew={true} record={null} parent={recordData}>
+            <SchemaComponentContext.Provider value={{ ...schemaComponentCtxValue, draggable: false }}>
-              {/* 快捷添加按钮添加的添加的是一个普通的 form 区块（非关系区块），不应该与任何字段有关联，所以在这里把字段相关的上下文给清除掉 */}
+              <RecordProvider isNew={true} record={null} parent={recordData}>
-              <ClearCollectionFieldContext>
+                {/* 快捷添加按钮添加的添加的是一个普通的 form 区块（非关系区块），不应该与任何字段有关联，所以在这里把字段相关的上下文给清除掉 */}
-                <RecursionField
+                <ClearCollectionFieldContext>
-                  onlyRenderProperties
+                  <RecursionField
-                  basePath={field.address}
+                    onlyRenderProperties
-                  schema={fieldSchema}
+                    basePath={field.address}
-                  filterProperties={(s) => {
+                    schema={fieldSchema}
-                    return s['x-component'] === 'Action';
+                    filterProperties={(s) => {
-                  }}
+                      return s['x-component'] === 'Action';
-                />
+                    }}
-              </ClearCollectionFieldContext>
+                  />
-            </RecordProvider>
+                </ClearCollectionFieldContext>
+              </RecordProvider>
+            </SchemaComponentContext.Provider>
           )}
         </Space.Compact>
       </div>

packages/core/client/src/schema-settings/GeneralSchemaDesigner.tsx

@@ -12,7 +12,7 @@ import { css } from '@emotion/css';
 import { useField, useFieldSchema } from '@formily/react';
 import { Space } from 'antd';
 import classNames from 'classnames';
-import React, { FC, useEffect, useMemo, useRef } from 'react';
+import React, { FC, useEffect, useMemo, useRef, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SchemaInitializer, SchemaSettings, SchemaToolbarProvider, useSchemaInitializerRender } from '../application';
 import { useSchemaSettingsRender } from '../application/schema-settings/hooks/useSchemaSettingsRender';
@@ -22,6 +22,7 @@ import { DragHandler, useCompile, useDesignable, useGridContext, useGridRowConte
 import { gridRowColWrap } from '../schema-initializer/utils';
 import { SchemaSettingsDropdown } from './SchemaSettings';
 import { useGetAriaLabelOfDesigner } from './hooks/useGetAriaLabelOfDesigner';
+import { SchemaComponentContext } from '../';
 import { useStyles } from './styles';
 
 const titleCss = css`
@@ -217,8 +218,9 @@ const InternalSchemaToolbar: FC<SchemaToolbarProps> = (props) => {
     ...(fieldSchema?.['x-toolbar-props'] || {}),
   } as SchemaToolbarProps;
   const { designable } = useDesignable();
+  const { draggable: draggableCtx } = useContext(SchemaComponentContext);
   const compile = useCompile();
-  const { styles } = useStyles();
+  const { styles }: any = useStyles();
   const { t } = useTranslation();
   const { getAriaLabel } = useGetAriaLabelOfDesigner();
   const dm = useDataSourceManager();
@@ -257,13 +259,13 @@ const InternalSchemaToolbar: FC<SchemaToolbarProps> = (props) => {
   }, [getAriaLabel, rowCtx?.cols?.length]);
 
   const dragElement = useMemo(() => {
-    if (draggable === false) return null;
+    if (draggable === false || draggableCtx === false) return null;
     return (
       <DragHandler>
         <DragOutlined role="button" aria-label={getAriaLabel('drag-handler')} />
       </DragHandler>
     );
-  }, [draggable, getAriaLabel]);
+  }, [draggable, getAriaLabel, draggableCtx]);
 
   const initializerElement = useMemo(() => {
     if (initializer === false) return null;