反应覆盖内的输入字段在模式下不起作用

Question

我有模态屏幕（使用react-bootstrap），在模态屏幕上我有多个链接到项目的覆盖层（弹出菜单）。这些叠加层有输入，当我单击输入时，它会立即失去焦点。我不知道出了什么问题，因为我在正常屏幕上有另一个弹出菜单，而不是模态菜单，工作正常。尝试设置自动对焦，但它也立即丢失。

我写了一个例子，https://codesandbox.io/s/rkemy

我认为它与 popper 有某种联系，因为 bootstrap 覆盖使用它，不知道在哪里挖掘

Answer 1

其他响应中提供的修复是一种解决方法，无法解决问题的真正原因。

该问题是由库的 Modal 组件的内部逻辑引起的，react-overlay该库是react-bootstrap. 具体来说，该问题是由下面列出的代码引起的

    const handleEnforceFocus = useEventCallback(() => {
      if (!enforceFocus || !isMounted() || !modal.isTopModal()) {
        return;
      }

      const currentActiveElement = activeElement();

      if (
        modal.dialog &&
        currentActiveElement &&
        !contains(modal.dialog, currentActiveElement)
      ) {
        modal.dialog.focus();
      }
    });

一旦第一个模态失去焦点，就会强制将焦点放在第一个模态上，就像当您将焦点移到输入上时一样。

为了解决这个问题，您必须将 传递enforceFocus={false}给您的 Modal 组件。

API 的文档可以在这里找到： https: //react-bootstrap.github.io/react-overlays/api/Modal#enforceFocus

正如文档所说： 一般来说，这不应该设置为 false，因为它会使辅助技术（例如屏幕阅读器）难以访问模态。但在您的情况下，这是正常工作的需要。