baidu / baidu/amis

drawer组件中如果嵌套了select组件,在移动端会出现无法确认的情况

Open
#7,407 2 comments 0 reactions 0 assignees View on GitHub
confirmed fix
Dominant language
TypeScript
Stars
18.9k
Forks
2.7k
PR merge metrics
No merged PRs in 30d

Description

移动端情况下,在对select进行选择完毕后,抽屉会自动关闭,无法确认。
使用的代码
{
"type": "page",
"remark": null,
"toolbar": [
{
"type": "button",
"actionType": "drawer",
"drawer": {
"title": "新增用户",
"closeOnOutside": true,
"size": "lg",
"body": {
"type": "form",
"name": "user_create_form",
"api": {
"url": "/user/create",
"method": "post"
},
"rules": [
{
"rule": "password==confirm_password",
"message": "密码和确认密码不一致",
"name": [
"password",
"confirm_password"
]
}
],
"body": [
{
"type": "input-text",
"name": "account",
"label": "登录账号",
"required": true
},
{
"type": "input-password",
"name": "password",
"label": "密码",
"required": true
},
{
"type": "input-password",
"name": "confirm_password",
"label": "确认密码",
"required": true
},
{
"type": "input-text",
"name": "nickName",
"label": "用户名",
"required": true
},
{
"type": "select",
"name": "userRoleId",
"label": "用户角色",
"multiple": true,
"source": {
"method": "post",
"url": "/role/rolePartInfoList"
},
"required": true
},
{
"type": "tree-select",
"name": "departmentId",
"label": "所属部门",
"required": true,
"onlyLeaf": true,
"source": "/department/generate"
}
]
}
},
"label": "新增",
"primary": true
}
],
"body": [
{
"autoGenerateFilter": true,
"type": "crud",
"name": "user_crud",
"api": {
"method": "post",
"url": "/user/userList"
},
"loadDataOnce": true,
"columns": [
{
"name": "account",
"label": "账户",
"sortable": true,
"searchable": {
"type": "input-text",
"name": "account",
"label": "账号"
}
},
{
"name": "nickName",
"label": "用户名",
"sortable": true,
"searchable": {
"type": "input-text",
"name": "nickName",
"label": "用户名"
}
},
{
"name": "userRole",
"label": "用户角色",
"sortable": true,
"type": "select",
"static": true
},
{
"name": "status",
"label": "状态"
},
{
"name": "department",
"label": "所属部门",
"type": "select",
"static": true
},
{
"type": "operation",
"label": "操作",
"width": "",
"buttons": [
{
"type": "button-group",
"buttons": [
{
"type": "button",
"label": "修改",
"level": "info",
"actionType": "drawer",
"drawer": {
"title": "修改用户",
"closeOnOutside": true,
"size": "md",
"body": {
"type": "form",
"name": "user_edit_form",
"api": {
"url": "/user/edit",
"method": "post"
},
"body": [
{
"type": "input-text",
"name": "nickName",
"label": "用户名",
"required": true
},
{
"type": "select",
"name": "userRole",
"label": "用户角色",
"multiple": true,
"source": {
"method": "post",
"url": "/role/rolePartInfoList"
},
"required": true
},
{
"type": "tree-select",
"name": "department",
"label": "所属部门",
"onlyLeaf": true,
"required": true,
"source": {
"method": "post",
"url": "/department/generate"
}
}
]
}
}
},
{
"type": "button",
"label": "停用",
"level": "danger",
"actionType": "ajax",
"confirmText": "您确认要停用账户${account}?",
"api": "/user/disable?account=${account}",
"disabledOn": "${status!=0}"
},
{
"type": "button",
"label": "启用",
"level": "success",
"actionType": "ajax",
"confirmText": "您确认要启用账户${account}?",
"api": "/user/enable?account=${account}",
"disabledOn": "${status!=-1}"
}
]
}
],
"placeholder": "-",
"fixed": "right"
}
],
"affixHeader": true,
"columnsTogglable": "auto",
"placeholder": "暂无数据",
"tableClassName": "table-db table-striped",
"headerClassName": "crud-table-header",
"footerClassName": "crud-table-footer",
"toolbarClassName": "crud-table-toolbar",
"combineNum": 0,
"bodyClassName": "panel-default"
}
]
}

https://github.com/baidu/amis/assets/55071625/145dd646-aa4e-4430-8a77-ed7595c89f19

Contributor guide

No contributing guide indexed for this repository

Research direction

Reproduce the provided drawer-with-form-and-select configuration on a mobile device, focusing on selection inside the nested drawer. Trace the drawer and select interaction from the relevant component entry points; done means selecting an option no longer closes the drawer before the user can confirm.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.