按选项卡不会循环浏览我的表单输入答案

【问题标题】：Pressing tab doesn't cycle through my form inputs按选项卡不会循环浏览我的表单输入
【发布时间】：2022-08-19 04:11:30
【问题描述】：

我正在使用 ReactJs 18 和 MDBootstrap 进行样式设置。

我有一个在模态中使用的表单组件（我有很多表单，但尝试使用相同的模态）。按 tab 或 shift-tab 在我的表单输入中前进或后退应该可以工作。

按 tab 或 shift-tab 什么都不做，我留在同一个输入中，当我把它放在模式之外时，表格本身就可以工作，一切正常，添加 tabindex 没有任何作用。

这是我在代码沙箱上创建的项目的链接，该项目重新创建了问题。 Link to codesandbox

请点击第一个表单顶部的卡片组件，弹出模态表单。

【解决方案1】：

这似乎是一个有趣的问题。

我检查了 MDBootstrap 文档，tabindex 和模态似乎有问题。

这似乎与问题有关制表符，这意味着将选项卡限制为模态对话框。

我在那里找不到任何有关此问题已解决的信息。

【讨论】：

更让我感到困惑的是，当我删除模态内容的条件渲染时，我可以使用 tab 循环，但由于某种原因不能使用 shift-tab，我更新了代码框，现在你可以找到两张具有两种行为的卡片。这让我很困惑，我不知道该怎么办。
是的，焦点行为很奇怪，我在 3 天前在 MDB 支持部分问过，今天得到了答复，他们说他们正在努力实施焦点陷阱，并且无法保证何时发布
是的，这与您在上一条评论中所说的行为相同，除了刷新页面之外，无论您做什么，表单都会保持相同的状态。就像它保存了您关注的任何领域，并且仅随着 TAB 按下而改变。
如原始问题中所述，我在 MDBModalBody 中有多种形式要呈现，所以我有点需要条件渲染，这就是我对第二个模态所做的，这就是我在第一条评论中所说的。所以恐怕这不能解决我原来的答案。
到目前为止，我最好的解决方案是使用 react modal，而不是 mdbModal，这对我来说很好用，在我使用它的代码和框示例中，焦点不能被困在模态中，但在我的项目中它工作正常。我不知道这是否是一个解决方案，但我没有别的事情可做。