fix: 修复 dialog 内部做常规动作没反应的问题 Close: #9149 (#9167)

packages/amis/__tests__/renderers/Dialog.test.tsx

@@ -0,0 +1,193 @@
+import {
+  cleanup,
+  fireEvent,
+  render,
+  waitFor,
+  screen
+} from '@testing-library/react';
+import '../../src';
+import {clearStoresCache, render as amisRender} from '../../src';
+import {makeEnv as makeEnvRaw, replaceReactAriaIds, wait} from '../helper';
+import rows from '../mockData/rows';
+import type {RenderOptions} from '../../src';
+
+afterEach(() => {
+  cleanup();
+  clearStoresCache();
+  jest.useRealTimers();
+});
+
+/** 避免updateLocation里的console.error */
+const makeEnv = (env?: Partial<RenderOptions>) =>
+  makeEnvRaw({updateLocation: () => {}, ...env});
+
+/**
+ * https://github.com/baidu/amis/issues/1405
+ *
+ * 验证弹窗的 CRUD 中再次弹出一个 crud，里面的 crud 确认关闭，不会关闭外面的 crud
+ */
+test('1. Renderer:dialog inner crud close outter crud component', async () => {
+  const {container, getByText} = render(
+    amisRender(
+      {
+        type: 'page',
+        body: {
+          type: 'button',
+          label: '第一层弹框',
+          actionType: 'dialog',
+          dialog: {
+            title: '第一层弹框标题',
+            body: [
+              {
+                type: 'button',
+                label: '第二次弹框',
+                actionType: 'dialog',
+                dialog: {
+                  title: '第二层弹框标题',
+                  body: [
+                    {
+                      type: 'tpl',
+                      tpl: '对你点击了',
+                      inline: false
+                    },
+                    {
+                      type: 'crud',
+                      api: '',
+                      columns: [
+                        {
+                          name: 'id',
+                          label: 'ID',
+                          type: 'text'
+                        },
+                        {
+                          name: 'engine',
+                          label: '渲染引擎',
+                          type: 'text'
+                        }
+                      ]
+                    },
+                    {
+                      type: 'button',
+                      label: '按钮',
+                      actionType: 'dialog',
+                      dialog: {
+                        title: '系统提示',
+                        body: '对你点击了'
+                      }
+                    }
+                  ],
+                  actions: [
+                    {
+                      type: 'button',
+                      label: '第二层确认',
+                      actionType: 'submit'
+                    }
+                  ],
+                  type: 'dialog'
+                },
+                size: 'md',
+                level: 'primary'
+              },
+              {
+                type: 'crud',
+                api: '',
+                columns: [
+                  {
+                    name: 'id',
+                    label: 'ID',
+                    type: 'text'
+                  },
+                  {
+                    name: 'engine',
+                    label: '渲染引擎',
+                    type: 'text'
+                  }
+                ]
+              }
+            ],
+            type: 'dialog'
+          },
+          size: 'md',
+          level: 'primary'
+        }
+      },
+      {},
+      makeEnv({})
+    )
+  );
+
+  // events
+  fireEvent.click(getByText('第一层弹框'));
+  await wait(200);
+
+  expect(getByText('第二次弹框')).toBeInTheDocument();
+  fireEvent.click(getByText('第二次弹框'));
+
+  await wait(200);
+  expect(getByText('第二层弹框标题')).toBeInTheDocument();
+
+  expect(getByText('第二层确认')).toBeInTheDocument();
+  fireEvent.click(getByText('第二层确认'));
+  await wait(400);
+
+  expect(getByText('第一层弹框标题')).toBeInTheDocument();
+  // 还有第二次弹窗的按钮，说明第一层弹窗没有关闭
+  expect(getByText('第二次弹框')).toBeInTheDocument();
+});
+
+/**
+ * https://github.com/baidu/amis/issues/9149
+ *
+ * 验证弹窗内部的 动作是通用动作时是否能正确响应。
+ *
+ * 比如弹窗里面有个按钮是页面跳转，看是否执行了页面跳转
+ */
+test('2. Renderer:dialog inner component with common action', async () => {
+  const jumpTo = jest.fn();
+  const {container, getByText} = render(
+    amisRender(
+      {
+        type: 'page',
+        title: '表单页面',
+        body: [
+          {
+            label: 'OpenADialog',
+            type: 'button',
+            actionType: 'dialog',
+            level: 'primary',
+            dialog: {
+              body: {
+                type: 'form',
+                api: 'post:/api/smart_lvct_boards/excel',
+                body: [
+                  {
+                    label: '下载Excel模板',
+                    type: 'action',
+                    level: 'success',
+                    actionType: 'url',
+                    url: '/api/filedown/zhuban'
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      },
+      {},
+      makeEnv({
+        jumpTo
+      })
+    )
+  );
+
+  // events
+  fireEvent.click(getByText('OpenADialog'));
+  await wait(200);
+
+  expect(getByText('下载Excel模板')).toBeInTheDocument();
+  fireEvent.click(getByText('下载Excel模板'));
+  await wait(400);
+
+  expect(jumpTo).toBeCalledTimes(1);
+  expect(jumpTo.mock.calls[0][0]).toBe('/api/filedown/zhuban');
+});

packages/amis/src/renderers/Dialog.tsx

@@ -932,8 +932,10 @@ export class DialogRenderer extends Dialog {
     const {onAction, store, onConfirm, env, dispatchEvent, onClose} =
       this.props;
     if (action.from === this.$$id) {
-      // 可能是孩子又派送回来到自己了，这时候就不要处理了。
-      return;
+      // 如果是从 children 里面委托过来的，那就直接向上冒泡。
+      return onAction
+        ? onAction(e, action, data, throwErrors, delegate || this.context)
+        : false;
     }
 
     const scoped = this.context as IScopedContext;
@@ -1021,7 +1023,8 @@ export class DialogRenderer extends Dialog {
           typeof action.close === 'string' &&
           this.closeTarget(action.close);
       }
-    } else if (this.tryChildrenToHandle(action, data)) {
+    } else if (!action.from && this.tryChildrenToHandle(action, data)) {
+      // 如果有 from 了，说明是从子节点冒泡上来的，那就不再走让子节点处理的逻辑。
       // do nothing
     } else if (action.actionType === 'ajax') {
       store.setCurrentAction(action);

packages/amis/src/renderers/Drawer.tsx

@@ -882,8 +882,10 @@ export class DrawerRenderer extends Drawer {
     const {onClose, onAction, store, env, dispatchEvent} = this.props;
 
     if (action.from === this.$$id) {
-      // 可能是孩子又派送回来到自己了，这时候就不要处理了。
-      return;
+      // 如果是从 children 里面委托过来的，那就直接向上冒泡。
+      return onAction
+        ? onAction(e, action, data, throwErrors, delegate || this.context)
+        : false;
     }
 
     const scoped = this.context as IScopedContext;
@@ -933,7 +935,8 @@ export class DrawerRenderer extends Drawer {
           ? this.handleSelfClose()
           : this.closeTarget(action.close);
       }
-    } else if (this.tryChildrenToHandle(action, data)) {
+    } else if (!action.from && this.tryChildrenToHandle(action, data)) {
+      // 如果有 from 了，说明是从子节点冒泡上来的，那就不再走让子节点处理的逻辑。
       // do nothing
     } else if (action.actionType === 'ajax') {
       store.setCurrentAction(action);