Skip to content

Bug: Modal组件和Alert组件的焦点问题 #5921

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.

Sign up for GitHub

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

Jump to bottom
Closed
5 tasks done
dongivan opened this issue Apr 11, 2025 · 2 comments · Fixed by #5922 or #5927
Closed
5 tasks done

Bug: Modal组件和Alert组件的焦点问题 #5921

dongivan opened this issue Apr 11, 2025 · 2 comments · Fixed by #5922 or #5927
Labels
bug Something isn't working

Comments

@dongivan
Copy link

dongivan commented Apr 11, 2025 •
edited
Loading

Version

Vben Admin V5

Describe the bug?

Modal组件在激活后，并没有立刻将焦点夺取到内部，而是要在外界轮转（使用tab）到最后之后才会trap在内部，可以参见https://www.vben.pro/#/examples/modal的例子。

Alert组件没有这个问题，但是有另外两个问题：

  1. 每一个按钮（包括右上角的X）都可以“连续得到两次”焦点（似乎是因为有两个button嵌套），在我的chrome上外部button获得焦点是黑色outline，内部的是蓝色的。
  2. 对于confirm来说，打开组件，按tab两次（打开时默认取消键得到焦点，按1次还是它，按第2次时焦点移动到了确认上），此时应该是确认按钮的外层button获得焦点，按回车，得到的结果不是确认而是取消。
  3. 刚刚打开时默认获得焦点的按钮没有outline的高亮效果，尽管实际上它们已经获得了焦点，而且按tab轮转的话可以看到它们再次获取焦点时是有高亮效果的。
    以上同样可以参见https://www.vben.pro/#/examples/modal的例子。

另外，请教有一下Alert组件怎样写可以加上和Modal组件同样的动画效果？

Reproduction

System Info

-

Relevant log output

-

Validations
@mynetfan mynetfan added bug Something isn't working and removed bug: pending triage labels Apr 11, 2025
@mynetfan
Copy link
Collaborator

mynetfan commented Apr 11, 2025 •
edited
Loading

Alert的焦点问题稍后修复。
至于Modal和Alert的焦点逻辑不同，这是因为二者的定位不同。Modal的主要操作区域在内部而不是自身的按钮，所以最好自己在opened事件中自行设置焦点组件。
而Alert的重点希望获得用户的反馈，所以默认的焦点会处于按钮之上（prompt额外进行了处理，会尝试自动聚焦到输入组件——如果输入组件提供了focus方法的话）。

简单总结一下：如果需要向用户展示一些信息或者要求用户对一些信息进行确认，用Alert。如果需要更复杂的需要互动的内容（如表单），用Modal

mynetfan added a commit to mynetfan/vue-vben-admin that referenced this issue Apr 11, 2025
@mynetfan
fix: alert action button focus, fixed vbenjs#5921
a5a31f3
@mynetfan mynetfan mentioned this issue Apr 11, 2025
Merged
16 tasks
mynetfan added a commit that referenced this issue Apr 11, 2025
@mynetfan
fix: alert action button focus, fixed #5921 (#5922)
9bd5a19 
* 修复Alert组件的按钮焦点切换问题
@mynetfan mynetfan mentioned this issue Apr 12, 2025
Merged
16 tasks
@mynetfan
Copy link
Collaborator

焦点问题、动画问题均已修复

YuchenWell added a commit to YuchenWell/vue-vben-admin that referenced this issue Apr 19, 2025
@YuchenWell
sync: code
55ccdc0 
Squashed commit of the following:

commit 79de6bc
Author: Netfan <[email protected]>
Date:   Thu Apr 17 22:23:05 2025 +0800

    fix: alert send wrong confirm state to beforeClose (vbenjs#5991)

    * 修复alert在按下Esc或者点击遮罩关闭时，可能发送错误的isConfirm状态

commit 14bd6dd
Author: Netfan <[email protected]>
Date:   Thu Apr 17 20:25:49 2025 +0800

    fix: destroyOnClose works within connectedComponent (vbenjs#5989)

    * 修复destroyOnClose没能销毁connectedComponent自身的问题

commit 7f269e0
Author: PIPEDREA_WZJ <[email protected]>
Date:   Thu Apr 17 14:01:39 2025 +0800

    Update tailwindcss.md (vbenjs#5602)

    tailwindcss最新的版本已经是v4.x，vben中使用的是3.x的tailwindcss。在未进行兼容前，会出现运行失败的问题

commit 4baec83
Author: yuh <[email protected]>
Date:   Thu Apr 17 14:00:46 2025 +0800

    feat: add examples: form-upload (vbenjs#5955)

    * feat: add examples: form-upload

    * fix: upload: accept and label

    * fix: upload: 设置表单值、图片预览

commit f7a4d13
Author: Netfan <[email protected]>
Date:   Wed Apr 16 14:11:04 2025 +0800

    fix: fixed arguments of callbacks in `formApi` (vbenjs#5970)

    * 修复 `handleValuesChange` 传递的参数不是处理后的表单值的问题

    * 修复 `handleReset` 未能传递正确参数的问题

commit 0936861
Author: Netfan <[email protected]>
Date:   Wed Apr 16 11:29:01 2025 +0800

    feat:  pass `fieldsChanged`  into the `handleValuesChange` callback function (vbenjs#5968)

    * fieldsChanged(已被改变值的字段名)将传入handleValuesChange回调函数

commit 3318d76
Author: ming4762 <[email protected]>
Date:   Wed Apr 16 11:28:36 2025 +0800

    perf: improve `destroyOnClose` for VbenModal (vbenjs#5964)

commit 8f3881e
Author: LinaBell <[email protected]>
Date:   Wed Apr 16 11:27:13 2025 +0800

    perf: `beforeClose` of drawer support promise (vbenjs#5932)

    * perf: the beforeClose function of drawer is consistent with that of modal

    * refactor: drawer test update

commit 5252480
Author: zhouda1fu <[email protected]>
Date:   Wed Apr 16 11:22:59 2025 +0800

    fix: missing await in department form(vbenjs#5967)

commit d18f561
Author: Netfan <[email protected]>
Date:   Tue Apr 15 20:52:23 2025 +0800

    docs: update alert and apiComponent docs (vbenjs#5961)

commit 333998b
Author: wyc001122 <[email protected]>
Date:   Tue Apr 15 20:51:38 2025 +0800

    fix: determine if scrollbar has been totally scrolled (vbenjs#5934)

    * 修复在系统屏幕缩放比例不为100%的情况下，滚动组件对是否已滚动到边界的判断可能不正确的问题

commit 3fb4fba
Author: ming4762 <[email protected]>
Date:   Tue Apr 15 18:49:57 2025 +0800

    fix: modal closing animation (vbenjs#5960)

commit c7e6210
Author: ming4762 <[email protected]>
Date:   Tue Apr 15 16:04:44 2025 +0800

    feat: `modal`&`drawer` support `center-footer` slot (vbenjs#5956)

commit d864085
Author: lztb <[email protected]>
Date:   Tue Apr 15 16:03:20 2025 +0800

    feat: vben-form添加arrayToStringFields属性 (vbenjs#5957)

    * feat: vben-form添加arrayToStringFields属性

    * feat: 修改handleArrayToStringFields和handleStringToArrayFields中嵌套数组格式的处理不一致

    ---------

    Co-authored-by: 米山 <[email protected]>

commit fcdc1a1
Author: Netfan <[email protected]>
Date:   Tue Apr 15 15:32:30 2025 +0800

    feat: add more expose methods for `apiComponent` (vbenjs#5958)

    * 为ApiComponent组件添加getOptions和getValue导出方法。

commit bf7496f
Author: Netfan <[email protected]>
Date:   Tue Apr 15 00:00:05 2025 +0800

    feat: add `useAlertContext` for Alert component (vbenjs#5947)

    * 新增Alert的子组件中获取弹窗上下文的能力

commit 9700150
Author: Netfan <[email protected]>
Date:   Mon Apr 14 19:56:52 2025 +0800

    fix: table actions in fixed column (vbenjs#5945)

commit f0e9e55
Author: Netfan <[email protected]>
Date:   Mon Apr 14 11:48:21 2025 +0800

    feat: alert support customize `footer` (vbenjs#5940)

    * Alert组件支持自定义footer

commit ff88274
Author: Netfan <[email protected]>
Date:   Mon Apr 14 11:18:33 2025 +0800

    fix: long navigation menu can be scrolled (vbenjs#5939)

    * 修复超长的导航菜单无法纵向滚动的问题

commit afce9dc
Author: ming4762 <[email protected]>
Date:   Sun Apr 13 23:02:07 2025 +0800

    perf: improve `destroyOnClose` for `VbenModal` (vbenjs#5935)

    * perf: 优化Vben Modal destroyOnClose，解决destroyOnClose=false，Modal依旧会被销毁的问题

    影响范围（重要）：destroyOnClose默认为true，这会导致所有的modal都会默认渲染到body
    radix-vue Dialog组件默认会销毁挂载的组件，所以即使destroyOnClose=false，Modal依旧会被销毁的问题
    对于一些大表单重复渲染导致卡顿，ApiComponent也会频繁的加载数据

    * fix: modal closing animation

    ---------

    Co-authored-by: Netfan <[email protected]>

commit b5700bd
Author: ming4762 <[email protected]>
Date:   Sun Apr 13 20:03:18 2025 +0800

    perf: improve `autoSelect` of  `ApiComponent` (vbenjs#5936)

    * fix: 修复autoSelect不生效的问题，props.valueField已经被omit了

    * feat: ApiComponent autoSelect支持使用函数，可以满足灵活性要求更高的场景

commit a8c4786
Author: Netfan <[email protected]>
Date:   Sat Apr 12 14:02:35 2025 +0800

    feat: api-component support autoSelect prop (vbenjs#5931)

    * feat: api-component support autoSelect prop

    * docs: add version requirement

commit 2971ccc
Author: Netfan <[email protected]>
Date:   Sat Apr 12 13:41:40 2025 +0800

    docs: docs modal z-index fixed, update alert docs (vbenjs#5930)

commit 4a2c7b3
Author: Netfan <[email protected]>
Date:   Sat Apr 12 10:37:47 2025 +0800

    fix: alert animation (vbenjs#5927)

commit 36bf6fc
Author: Netfan <[email protected]>
Date:   Sat Apr 12 01:44:08 2025 +0800

    fix: builtin color change throttled in preference drawer (vbenjs#5924)

    修复偏好设置中的自定义主题色拖动选择颜色时页面会明显卡顿的问题

commit f46ec30
Author: Netfan <[email protected]>
Date:   Sat Apr 12 01:16:57 2025 +0800

    fix: theme mode follow the system only `auto` (vbenjs#5923)

    * 修复主题在未设置为auto时，仍然会跟随系统主题变化的问题。

commit 9bd5a19
Author: Netfan <[email protected]>
Date:   Sat Apr 12 00:59:56 2025 +0800

    fix: alert action button  focus, fixed vbenjs#5921 (vbenjs#5922)

    * 修复Alert组件的按钮焦点切换问题

commit 86da3ce
Author: zhang <[email protected]>
Date:   Wed Apr 9 16:16:56 2025 +0800

    chore: 导出框架自带的组件，方便独立页面使用 (vbenjs#5876)

commit 329a176
Author: Netfan <[email protected]>
Date:   Wed Apr 9 01:05:20 2025 +0800

    perf:  optimize bootstrap modules to speed up first-screen loading (vbenjs#5899)

    优化首屏加载速度

commit 9379093
Author: Netfan <[email protected]>
Date:   Tue Apr 8 20:28:50 2025 +0800

    feat: customizable table separator (vbenjs#5898)

    * 表格的分隔条支持定制背景色或完全移除

commit c9014d0
Author: ming4762 <[email protected]>
Date:   Tue Apr 8 20:27:03 2025 +0800

    perf: 优化关闭页面切换动画的tab切换性能 (vbenjs#5883)

commit ed26dca
Author: Netfan <[email protected]>
Date:   Tue Apr 8 16:31:41 2025 +0800

    chore: update pnpm-lock.yaml

commit 08c6496
Author: Netfan <[email protected]>
Date:   Tue Apr 8 14:56:40 2025 +0800

    chore: update deps

commit a8c5df3
Author: Netfan <[email protected]>
Date:   Tue Apr 8 14:50:05 2025 +0800

    fix: possible circular reference issue during build (vbenjs#5894)

    * 修复构建期间出现的循环引用警告

commit 71e8d12
Author: Netfan <[email protected]>
Date:   Mon Apr 7 01:21:30 2025 +0800

    fix: improve prompt component (vbenjs#5879)

    * fix: prompt component render fixed

    * fix: alert buttonAlign default value

commit d216fdc
Author: Netfan <[email protected]>
Date:   Sat Apr 5 13:07:52 2025 +0800

    feat: support logo text slot (vbenjs#5872)

    * 基础布局中的LOGO的文字区域允许通过插槽logo-text定制

commit 384c5d7
Author: wyc001122 <[email protected]>
Date:   Sat Apr 5 11:04:59 2025 +0800

    fix: 布局为双列菜单或者水平模式下， 一级菜单高亮问题 (vbenjs#5870)

    Co-authored-by: 王泳超 <[email protected]>

commit b0ad08d
Author: Netfan <[email protected]>
Date:   Fri Apr 4 15:21:09 2025 +0800

    feat: use the not-found component instead of the invalid route component in the backend mode (vbenjs#5871)

    * 后端菜单模式下，使用not-found组件代替无效的路由组件
YuchenWell added a commit to YuchenWell/vue-vben-admin that referenced this issue Apr 23, 2025
@YuchenWell
sync: 同步代码
82cb0c7 
Squashed commit of the following:

commit 1437770
Author: Netfan <[email protected]>
Date:   Wed Apr 23 12:20:52 2025 +0800

    fix: alert confirm state in beforeClose callback (vbenjs#6019)

commit b985ff0
Author: pangyajun123 <[email protected]>
Date:   Mon Apr 21 19:15:05 2025 +0800

    fix: vxe-table theme token follow primary color (vbenjs#6007)

commit b148b8e
Author: wyc001122 <[email protected]>
Date:   Sat Apr 19 14:35:33 2025 +0800

    fix: fix geader menu activation path (vbenjs#5997)

    Co-authored-by: 王泳超 <[email protected]>

commit 79de6bc
Author: Netfan <[email protected]>
Date:   Thu Apr 17 22:23:05 2025 +0800

    fix: alert send wrong confirm state to beforeClose (vbenjs#5991)

    * 修复alert在按下Esc或者点击遮罩关闭时，可能发送错误的isConfirm状态

commit 14bd6dd
Author: Netfan <[email protected]>
Date:   Thu Apr 17 20:25:49 2025 +0800

    fix: destroyOnClose works within connectedComponent (vbenjs#5989)

    * 修复destroyOnClose没能销毁connectedComponent自身的问题

commit 7f269e0
Author: PIPEDREA_WZJ <[email protected]>
Date:   Thu Apr 17 14:01:39 2025 +0800

    Update tailwindcss.md (vbenjs#5602)

    tailwindcss最新的版本已经是v4.x，vben中使用的是3.x的tailwindcss。在未进行兼容前，会出现运行失败的问题

commit 4baec83
Author: yuh <[email protected]>
Date:   Thu Apr 17 14:00:46 2025 +0800

    feat: add examples: form-upload (vbenjs#5955)

    * feat: add examples: form-upload

    * fix: upload: accept and label

    * fix: upload: 设置表单值、图片预览

commit f7a4d13
Author: Netfan <[email protected]>
Date:   Wed Apr 16 14:11:04 2025 +0800

    fix: fixed arguments of callbacks in `formApi` (vbenjs#5970)

    * 修复 `handleValuesChange` 传递的参数不是处理后的表单值的问题

    * 修复 `handleReset` 未能传递正确参数的问题

commit 0936861
Author: Netfan <[email protected]>
Date:   Wed Apr 16 11:29:01 2025 +0800

    feat:  pass `fieldsChanged`  into the `handleValuesChange` callback function (vbenjs#5968)

    * fieldsChanged(已被改变值的字段名)将传入handleValuesChange回调函数

commit 3318d76
Author: ming4762 <[email protected]>
Date:   Wed Apr 16 11:28:36 2025 +0800

    perf: improve `destroyOnClose` for VbenModal (vbenjs#5964)

commit 8f3881e
Author: LinaBell <[email protected]>
Date:   Wed Apr 16 11:27:13 2025 +0800

    perf: `beforeClose` of drawer support promise (vbenjs#5932)

    * perf: the beforeClose function of drawer is consistent with that of modal

    * refactor: drawer test update

commit 5252480
Author: zhouda1fu <[email protected]>
Date:   Wed Apr 16 11:22:59 2025 +0800

    fix: missing await in department form(vbenjs#5967)

commit d18f561
Author: Netfan <[email protected]>
Date:   Tue Apr 15 20:52:23 2025 +0800

    docs: update alert and apiComponent docs (vbenjs#5961)

commit 333998b
Author: wyc001122 <[email protected]>
Date:   Tue Apr 15 20:51:38 2025 +0800

    fix: determine if scrollbar has been totally scrolled (vbenjs#5934)

    * 修复在系统屏幕缩放比例不为100%的情况下，滚动组件对是否已滚动到边界的判断可能不正确的问题

commit 3fb4fba
Author: ming4762 <[email protected]>
Date:   Tue Apr 15 18:49:57 2025 +0800

    fix: modal closing animation (vbenjs#5960)

commit c7e6210
Author: ming4762 <[email protected]>
Date:   Tue Apr 15 16:04:44 2025 +0800

    feat: `modal`&`drawer` support `center-footer` slot (vbenjs#5956)

commit d864085
Author: lztb <[email protected]>
Date:   Tue Apr 15 16:03:20 2025 +0800

    feat: vben-form添加arrayToStringFields属性 (vbenjs#5957)

    * feat: vben-form添加arrayToStringFields属性

    * feat: 修改handleArrayToStringFields和handleStringToArrayFields中嵌套数组格式的处理不一致

    ---------

    Co-authored-by: 米山 <[email protected]>

commit fcdc1a1
Author: Netfan <[email protected]>
Date:   Tue Apr 15 15:32:30 2025 +0800

    feat: add more expose methods for `apiComponent` (vbenjs#5958)

    * 为ApiComponent组件添加getOptions和getValue导出方法。

commit bf7496f
Author: Netfan <[email protected]>
Date:   Tue Apr 15 00:00:05 2025 +0800

    feat: add `useAlertContext` for Alert component (vbenjs#5947)

    * 新增Alert的子组件中获取弹窗上下文的能力

commit 9700150
Author: Netfan <[email protected]>
Date:   Mon Apr 14 19:56:52 2025 +0800

    fix: table actions in fixed column (vbenjs#5945)

commit f0e9e55
Author: Netfan <[email protected]>
Date:   Mon Apr 14 11:48:21 2025 +0800

    feat: alert support customize `footer` (vbenjs#5940)

    * Alert组件支持自定义footer

commit ff88274
Author: Netfan <[email protected]>
Date:   Mon Apr 14 11:18:33 2025 +0800

    fix: long navigation menu can be scrolled (vbenjs#5939)

    * 修复超长的导航菜单无法纵向滚动的问题

commit afce9dc
Author: ming4762 <[email protected]>
Date:   Sun Apr 13 23:02:07 2025 +0800

    perf: improve `destroyOnClose` for `VbenModal` (vbenjs#5935)

    * perf: 优化Vben Modal destroyOnClose，解决destroyOnClose=false，Modal依旧会被销毁的问题

    影响范围（重要）：destroyOnClose默认为true，这会导致所有的modal都会默认渲染到body
    radix-vue Dialog组件默认会销毁挂载的组件，所以即使destroyOnClose=false，Modal依旧会被销毁的问题
    对于一些大表单重复渲染导致卡顿，ApiComponent也会频繁的加载数据

    * fix: modal closing animation

    ---------

    Co-authored-by: Netfan <[email protected]>

commit b5700bd
Author: ming4762 <[email protected]>
Date:   Sun Apr 13 20:03:18 2025 +0800

    perf: improve `autoSelect` of  `ApiComponent` (vbenjs#5936)

    * fix: 修复autoSelect不生效的问题，props.valueField已经被omit了

    * feat: ApiComponent autoSelect支持使用函数，可以满足灵活性要求更高的场景

commit a8c4786
Author: Netfan <[email protected]>
Date:   Sat Apr 12 14:02:35 2025 +0800

    feat: api-component support autoSelect prop (vbenjs#5931)

    * feat: api-component support autoSelect prop

    * docs: add version requirement

commit 2971ccc
Author: Netfan <[email protected]>
Date:   Sat Apr 12 13:41:40 2025 +0800

    docs: docs modal z-index fixed, update alert docs (vbenjs#5930)

commit 4a2c7b3
Author: Netfan <[email protected]>
Date:   Sat Apr 12 10:37:47 2025 +0800

    fix: alert animation (vbenjs#5927)

commit 36bf6fc
Author: Netfan <[email protected]>
Date:   Sat Apr 12 01:44:08 2025 +0800

    fix: builtin color change throttled in preference drawer (vbenjs#5924)

    修复偏好设置中的自定义主题色拖动选择颜色时页面会明显卡顿的问题

commit f46ec30
Author: Netfan <[email protected]>
Date:   Sat Apr 12 01:16:57 2025 +0800

    fix: theme mode follow the system only `auto` (vbenjs#5923)

    * 修复主题在未设置为auto时，仍然会跟随系统主题变化的问题。

commit 9bd5a19
Author: Netfan <[email protected]>
Date:   Sat Apr 12 00:59:56 2025 +0800

    fix: alert action button  focus, fixed vbenjs#5921 (vbenjs#5922)

    * 修复Alert组件的按钮焦点切换问题

commit 86da3ce
Author: zhang <[email protected]>
Date:   Wed Apr 9 16:16:56 2025 +0800

    chore: 导出框架自带的组件，方便独立页面使用 (vbenjs#5876)

commit 329a176
Author: Netfan <[email protected]>
Date:   Wed Apr 9 01:05:20 2025 +0800

    perf:  optimize bootstrap modules to speed up first-screen loading (vbenjs#5899)

    优化首屏加载速度

commit 9379093
Author: Netfan <[email protected]>
Date:   Tue Apr 8 20:28:50 2025 +0800

    feat: customizable table separator (vbenjs#5898)

    * 表格的分隔条支持定制背景色或完全移除

commit c9014d0
Author: ming4762 <[email protected]>
Date:   Tue Apr 8 20:27:03 2025 +0800

    perf: 优化关闭页面切换动画的tab切换性能 (vbenjs#5883)

commit ed26dca
Author: Netfan <[email protected]>
Date:   Tue Apr 8 16:31:41 2025 +0800

    chore: update pnpm-lock.yaml

commit 08c6496
Author: Netfan <[email protected]>
Date:   Tue Apr 8 14:56:40 2025 +0800

    chore: update deps

commit a8c5df3
Author: Netfan <[email protected]>
Date:   Tue Apr 8 14:50:05 2025 +0800

    fix: possible circular reference issue during build (vbenjs#5894)

    * 修复构建期间出现的循环引用警告

commit 71e8d12
Author: Netfan <[email protected]>
Date:   Mon Apr 7 01:21:30 2025 +0800

    fix: improve prompt component (vbenjs#5879)

    * fix: prompt component render fixed

    * fix: alert buttonAlign default value

commit d216fdc
Author: Netfan <[email protected]>
Date:   Sat Apr 5 13:07:52 2025 +0800

    feat: support logo text slot (vbenjs#5872)

    * 基础布局中的LOGO的文字区域允许通过插槽logo-text定制

commit 384c5d7
Author: wyc001122 <[email protected]>
Date:   Sat Apr 5 11:04:59 2025 +0800

    fix: 布局为双列菜单或者水平模式下， 一级菜单高亮问题 (vbenjs#5870)

    Co-authored-by: 王泳超 <[email protected]>

commit b0ad08d
Author: Netfan <[email protected]>
Date:   Fri Apr 4 15:21:09 2025 +0800

    feat: use the not-found component instead of the invalid route component in the backend mode (vbenjs#5871)

    * 后端菜单模式下，使用not-found组件代替无效的路由组件
@github-actions github-actions bot locked and limited conversation to collaborators Apr 27, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
2 participants
@dongivan @mynetfan