重复问题
- 我已搜索现有的问题
最新版本
- 我已测试了最新版本
重现步骤 🕹
链接到实时示例: https://codesandbox.io/s/eager-mopsa-tk86fq?file=/src/App.js
为了方便重现情况,将MUI的FocusTrap和focus-trap-react都添加到沙箱中。
当前行为 😯
排序似乎出错了。
预期行为 🤔
在具有不同tabindex的多个可聚焦元素的FocusTrap中,当FocusTrap被聚焦时,顺序应该从索引大于0的任何项目开始,循环直到完成> 0的项目,然后到达具有正常0 tabindex的项目。
示例是:
<button> normal 1</button>
<button tabindex='3'> indexed 3 </button>
<button tabindex='2'> indexed 2 </button>
<button> normal 2</button>
<button tabindex='1'> indexed 1 </button>
<button> normal 3</button>
聚焦顺序应该是:
indexed 1
indexed 2
indexed 3
normal 1
normal 2
normal 3
但MUI的行为是:
normal 1
normal 2
normal 3
indexed 1
indexed 2
indexed 3
focus-trap 和 focus-trap-react 的行为似乎是正确的。
可能相关的代码行:
material-ui/packages/mui-base/src/FocusTrap/FocusTrap.tsx
第113行 in ab2e057
| | .sort((a,b)=> |
1条答案
按热度按时间rkttyhzu1#
感谢hosein2398的提醒,我能够复现描述的行为。
据我理解,问题在于我们的哨兵在tabIndex > 0之后会变得聚焦。
因此,一个似乎有效的解决方案是将第一个哨兵设置为首先出现
至于第一个元素的聚焦问题,这在#37672中有讨论。