多级弹窗场景，从一级弹窗打开二级弹窗后关闭一级弹窗，导致二级弹窗闪退bug

wubin1989 commented 3 months ago

描述问题：

多级弹窗场景，从一级弹窗打开二级弹窗后关闭一级弹窗，导致二级弹窗闪退bug。

我把关闭本级弹窗和打开二级弹窗的两个action调换顺序也不行。

截图或视频：

是交互上的问题，不好截图。

如何复现（请务必完整填写下面内容）：

你是如何使用 amis 的？ npm，用的是amis-editor-demo工程
amis 版本是什么？请先在最新 beta 版本测试问题是否存在从amis 6.0.0版本起就存在，最新版本v6.4.1版本依然存在

粘贴有问题的完整 amis schema 代码：

{
"type": "page",
"title": "多级弹窗bug复现",
"body": [
{
  "type": "button",
  "label": "点我",
  "actionType": "dialog",
  "level": "primary",
  "dialog": {
    "type": "dialog",
    "title": "一级弹窗",
    "body": [
      {
        "type": "button",
        "label": "按钮",
        "onEvent": {
          "click": {
            "actions": [
              {
                "ignoreError": false,
                "actionType": "closeDialog",
                "componentId": "u:e87f1cb48b19"
              },
              {
                "ignoreError": false,
                "actionType": "dialog",
                "dialog": {
                  "type": "dialog",
                  "title": "二级弹窗",
                  "body": [
                    {
                      "type": "tpl",
                      "tpl": "弹窗内容",
                      "id": "u:6a2533606314"
                    }
                  ],
                  "id": "u:bee964d7f84d",
                  "actions": [
                    {
                      "type": "button",
                      "actionType": "cancel",
                      "label": "取消",
                      "id": "u:c842c40f0212"
                    },
                    {
                      "type": "button",
                      "actionType": "confirm",
                      "label": "确定",
                      "primary": true,
                      "id": "u:bfcb369de48d"
                    }
                  ],
                  "actionType": "dialog",
                  "showCloseButton": true,
                  "closeOnOutside": false,
                  "closeOnEsc": false,
                  "showErrorMsg": true,
                  "showLoading": true,
                  "draggable": false
                }
              }
            ]
          }
        },
        "id": "u:62b33e843d58"
      }
    ],
    "size": "lg",
    "actions": [
      {
        "type": "button",
        "actionType": "cancel",
        "label": "取消",
        "id": "u:5d01cdee8412"
      },
      {
        "type": "button",
        "actionType": "confirm",
        "label": "确定",
        "primary": true,
        "id": "u:15e9b062157d",
        "onEvent": {
          "click": {
            "weight": 0,
            "actions": []
          }
        }
      }
    ],
    "id": "u:e87f1cb48b19",
    "actionType": "dialog",
    "showCloseButton": true,
    "closeOnOutside": false,
    "closeOnEsc": false,
    "showErrorMsg": true,
    "showLoading": true,
    "draggable": false
  },
  "id": "u:db2f03aac008"
}
],
"asideResizor": true,
"pullRefresh": {
"disabled": true
},
"id": "u:6431be9d53ef",
"definitions": {}
}

操作步骤点击“点我”按钮，打开一级弹窗后，再点“按钮”按钮，可以复现问题

github-actions[bot] commented 3 months ago

👍 Thanks for this! 🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

lhtuling commented 1 month ago

https://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/event-action#%E5%85%B3%E9%97%AD%E5%BC%B9%E7%AA%97-%E6%A8%A1%E6%80%81- 看官方示例，是没问题的

可以指定id关闭

Amis低代码前端框架交流群【QQ1群】：717791727 Amis低代码前端框架交流群【QQ2群】：721182449

donglixiaoche commented 1 month ago

@wubin1989 我看了下，对于这种嵌套打开弹窗的场景，如果关闭父级弹窗，子元素也不会再渲染，因此这里子弹窗马上关闭了是当前版本的预期行为，不是闪退。我这边还在看如何满足你的使用场景，有结论了会回复

wubin1989 commented 1 month ago

@donglixiaoche 谢谢！

wubin1989 commented 1 month ago

@lhtuling 站在你们的角度确实是没问题的，但是不满足我们的需求。我们就认为打开子弹窗的同时，父弹窗遮挡在后面就很丑，我们期望子弹窗展示的时候，父弹窗可以隐藏，只留下一个弹窗，而不是叠起来若干层。

2betop commented 1 month ago

可以先关闭父级弹窗再打开你的『子弹窗』

wubin1989 commented 1 month ago

@2betop 感谢回复！你可以验证一下我贴出来的schema，已经就是按你说的那样配置的。如果我配置的方式不对，烦请指正！

2betop commented 1 month ago

确实有问题，我们去修复，目前尝试换个写法虽然能弹出但是一直 loading，待后续新版本修复

{
  "type": "page",
  "title": "多级弹窗bug复现",
  "onEvent": {
    "openSecondDialog": {
      "actions": [
        {
          "ignoreError": false,
          "actionType": "closeDialog",
          "componentId": "u:e87f1cb48b19"
        },
        {
          "ignoreError": false,
          "actionType": "dialog",
          "dialog": {
            "type": "dialog",
            "title": "二级弹窗",
            "body": [
              {
                "type": "tpl",
                "tpl": "弹窗内容",
                "id": "u:6a2533606314"
              }
            ],
            "id": "u:bee964d7f84d",
            "actions": [
              {
                "type": "button",
                "actionType": "cancel",
                "label": "取消",
                "id": "u:c842c40f0212"
              },
              {
                "type": "button",
                "actionType": "confirm",
                "label": "确定",
                "primary": true,
                "id": "u:bfcb369de48d"
              }
            ],
            "actionType": "dialog",
            "showCloseButton": true,
            "closeOnOutside": false,
            "closeOnEsc": false,
            "showErrorMsg": true,
            "showLoading": true,
            "draggable": false
          }
        }
      ]
    }
  },
  "body": [
    {
      "type": "button",
      "label": "点我",
      "actionType": "dialog",
      "level": "primary",
      "dialog": {
        "type": "dialog",
        "title": "一级弹窗",
        "body": [
          {
            "type": "button",
            "label": "按钮",
            "onEvent": {
              "click": {
                "actions": [
                  {
                    "actionType": "broadcast",
                    "args": {
                      "eventName": "openSecondDialog"
                    },
                    "data": {}
                  }
                ]
              }
            },
            "id": "u:62b33e843d58"
          }
        ],
        "size": "lg",
        "actions": [
          {
            "type": "button",
            "actionType": "cancel",
            "label": "取消",
            "id": "u:5d01cdee8412"
          },
          {
            "type": "button",
            "actionType": "confirm",
            "label": "确定",
            "primary": true,
            "id": "u:15e9b062157d",
            "onEvent": {
              "click": {
                "weight": 0,
                "actions": []
              }
            }
          }
        ],
        "id": "u:e87f1cb48b19",
        "actionType": "dialog",
        "showCloseButton": true,
        "closeOnOutside": false,
        "closeOnEsc": false,
        "showErrorMsg": true,
        "showLoading": true,
        "draggable": false
      },
      "id": "u:db2f03aac008"
    },
    {
      "type": "button",
      "label": "按钮",
      "onEvent": {
        "click": {
          "actions": [
            {
              "actionType": "broadcast",
              "args": {
                "eventName": "openSecondDialog"
              },
              "data": {}
            }
          ]
        }
      },
      "id": "u:62b33e843d58"
    }
  ],
  "asideResizor": true,
  "pullRefresh": {
    "disabled": true
  },
  "id": "u:6431be9d53ef",
  "definitions": {}
}

baidu / amis