Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

弹窗中的 input-table 的 picker 在input-table新增的时候表现异常,点击 picker 弹窗的取消或确认按钮,input-table 中正在新增的行就会消失 #10200

Closed
BeMxself opened this issue May 10, 2024 · 1 comment · Fixed by #10213
Assignees

Comments

@BeMxself
Copy link
Contributor

描述问题:

input-table 位于弹窗的 form 中,其 picker 类型的列在新增状态下,无法选择值,打开 picker 弹窗后,选中值点确认/或者直接点取消,都会导致 input-table 正在新增的这一行消失。
但是,编辑状态的行没有这个问题。

截图或视频:

2024-05-10.14.40.39.mov

如何复现(请务必完整填写下面内容):

  1. 你是如何使用 amis 的?
    npm

  2. amis 版本是什么?请先在最新 beta 版本测试问题是否存在
    6.3.0
    6.4.1

  3. 粘贴有问题的完整 amis schema 代码:

{
  "type": "page",
  "body": {
    "type": "action",
    "actionType": "dialog",
    "label": "测试弹窗中的 input-table 中的 picker",
    "dialog": {
      "body": {
        "type": "form",
        "body": [
          {
            "type": "input-table",
            "name": "table",
            "addable": true,
            "editable": true,
            "columns": [
              {
                "type": "picker",
                "name": "picker",
                "label": "picker",
                "options": [
                  {
                    "label": "A",
                    "value": "a"
                  },
                  {
                    "label": "B",
                    "value": "b"
                  },
                  {
                    "label": "C",
                    "value": "c"
                  }
                ]
              },
              {
                "name": "b",
                "label": "B"
              }
            ]
          }
        ]
      }
    }
  }
}
  1. 操作步骤
  • 点击测试弹窗中的 input-table 中的 picker按钮
  • 点击弹窗中 input-table 的 新增 按钮
  • 点击 input-table 第一行第一列的 picker
  • 选中任意数据,点击确认按钮,或直接点击取消按钮
  • 可见刚才新增的那一行已经消失
@BeMxself
Copy link
Contributor Author

BeMxself commented May 10, 2024

我跟踪了一下代码,发现问题发生过程是这样的(下面的 Dialog 皆是指 input-table 及其所属的 form 所在的 Dialog):

  • Dialog 给 body 传入了 onActionSensor
  • picker的模态框默认的 确认取消的 Action 会返回一个异步的结果,就会触发 Dialog 的 actionSensor
  • Dialog 的 handleActionSensor 中会将当前 Dialog 的 store 的 busying 为 true
  • Dialog 在 renderBody 的时候会根据 store 的 busying 传递 disabled = true 的属性
  • Dialog 中的 Form 在 renderChild 的时候会将 disabled 传递给 input-table
  • input-table 的 componentDidUpdate 中检查到 disabled 为 true 的时候会将 __isPlaceholder 为 true 的条目过滤掉
  • 至此,BUG显现

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants