重复问题
- 我搜索了现有的问题
最新版本
- 我测试了最新版本
重现步骤 🕹
步骤：
- 在AccordionDetails中创建一个带有2个输入的Accordion组件
- 展开Accordion
- 点击Accordion中的第一个输入，然后按tab键
- 观察焦点没有转移到下一个输入
当前行为 😯
当我点击Accordion以展开它，然后点击AccordionDetails中的的第一个输入，然后按tab键时，它不会将焦点转移到下一个输入。
预期行为 🤔
我希望当我点击Accordion以展开它，然后点击AccordionDetails中的输入时，按tab键可以切换到下一个输入。
上下文 🔦
我正在尝试实现一个具有表单元素的Accordion组件。这些是用户可以展开/折叠的高级设置。
你的环境 🌎
npx @mui/envinfo
System:
OS: macOS 14.1.1
Binaries:
Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
Yarn: Not Found
npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
Browsers:
Chrome: 119.0.6045.199
npmPackages:
@emotion/react: ^11.11.1 => 11.11.1
@emotion/styled: ^11.11.0 => 11.11.0
@mui/base: ^5.0.0-beta.22 => 5.0.0-beta.22
@mui/core-downloads-tracker: 5.14.16
@mui/icons-material: ^5.14.16 => 5.14.16
@mui/joy: ^5.0.0-beta.13 => 5.0.0-beta.13
@mui/material: 5.14.16
@mui/private-theming: 5.14.16
@mui/styled-engine: 5.14.16
@mui/system: 5.14.16
@mui/types: 7.2.8
@mui/utils: 5.14.16
@types/react: ^18.2.34 => 18.2.34
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^5.2.2 => 5.2.2
5条答案
按热度按时间bmp9r5qi1#
为什么需要在AccordionDetails中输入？我认为我从未见过这种情况。您的用例是什么？请提供一个CodeSandbox来重现问题。
8xiog9wr2#
为什么需要在AccordionDetails中输入内容？我认为我从未见过这种情况。您的用例是什么？请提供一个CodeSandbox来重现问题。
例如，这是Joy UI文档中的示例。
此外，根据ARIA编写实践指南，这将是推荐的行为。
选项卡：将焦点移动到下一个可聚焦元素； accordion 中的所有可聚焦元素都包含在页面选项卡顺序中。
9lowa7mx3#
问题似乎是，某些元素(
a,button,input,textarea,select,details)在AccordionDetails组件内部时会获得一个tabIndex为 -1。实现暗示这应该只在 accordion 关闭时发生，当 accordion 再次展开时，应恢复常规的 tabIndex。当我为
AccordionDetails组件内的组件显式设置一个tabIndex(例如对于Textarea:<Textarea slotProps={{ textarea: { tabIndex: 0 } }} />,机制是有效的。当没有显式设置tabIndex时，即使 accordion 展开，tabIndex也是-1。我认为这是一个应该修复的错误。zf9nrax14#
解决方案@basti4242似乎只在 accordion 最初展开时起作用(将
defaultExpanded设置为true)。否则，在初始化过程中，tabIndex和data-prev-tabindex将被设置为-1:joy-ui-accordion-tab-index-bug.mov
为了解决这些问题，可以添加两个额外的测试用例。
defaultExpanded设置为false且 accordion 首次展开时，测试标签索引是否为0。0。pexxcrt25#
查看了这个问题，因为我也遇到了这个问题。
我非常确定这一行需要移除
&& !currentTabIndex条件。在第一次渲染后，currentTabIndex总是等于"-1",所以除非它本来就不存在，否则这将无法移除属性。添加
tab-index="-1"的部分会在双渲染时错误地将data-prev-tabindex设置为"-1",例如在 React 开发模式下发生的情况。在测试这个时，之前所做的更改在生产环境中解决了问题，但在开发环境中没有解决。这种部分修复的另一个问题是，具有显式 tab-index 的元素在默认展开的详细信息中会被清除其 tab index。最好使用显式的
data-prev-tabindex="unset"或其他方法来跟踪。