React Select 无法通过 TestCafe 聚焦在 Office UI Fabric 层内答案

【问题标题】：React Select fails to focus inside Office UI Fabric Layer with TestCafeReact Select 无法通过 TestCafe 聚焦在 Office UI Fabric 层内
【发布时间】：2019-12-16 18:20:11
【问题描述】：

TestCafe 中似乎存在一个长期存在的问题，即手动调用 .focus() 方法无法正常工作并随后导致问题：

https://github.com/DevExpress/testcafe/issues/2029

我相信这至少是react-select 在通过 TestCafe 测试时无法正常运行的部分原因。

希望能够输入react-selects 输入，然后选择所需的选项。不幸的是，previously asked and answered SO thread 无法正常工作。可能是由于该线程处于活动状态后的更新。

另一个选项是直接选择该选项，但是，在我们的项目中，由于可用的选择项目数量众多，我们最终需要使用react-virtualized。你可以找到我的related posting on SO here。

我尝试过的方法：

await t.hover(
        ReactSelector('Select').find('input') // also .findReact('Placeholder')
    )
    .click(
        ReactSelector('Select').find('input') // also .findReact('Placeholder')
    )
    .typeText(
        ReactSelector('Select').find('input'),
        'option'
    )

使用第一种方法，似乎找到了元素（TestCafe 没有失败/超时说明未找到元素），但输入永远不会收到文本并且菜单项没有被过滤。

await t.click(
        ReactSelector('Select').findReact('DropdownIndicator')
    )
    .typeText(
        ReactSelector('Select').find('input'),
        'option'
    )

使用这种方法，菜单打开，但输入没有聚焦，再次输入没有接收到文本，菜单项也没有过滤。

更新 1

结果在尝试基本复制问题时，没有问题。所以问题一定更复杂。以后我会继续调试和更新。这是基本的复制测试：

import 'testcafe'
import { ReactSelector } from 'testcafe-react-selectors'

fixture('React Select').page('https://react-select.com/home')

test('Select should focus', async (t) => {
    const select = ReactSelector('BasicMulti').findReact('Select')

    await t.click(select)

    await t.debug()

    await t.expect(select.find('input').focused).ok()
})

更新 2

似乎与 Office UI Fabric 的 Layer component 存在冲突。我们的项目在 Panel 组件内渲染了 Select，我最初认为其中一个子组件 (FocusTrapZone) 是罪魁祸首，但在单独渲染 Select 并在其周围单独包装组件之后，Layer 组件似乎是原因。

我最初的想法是这与事件冒泡冲突，但我将 eventBubblingEnabled 属性切换为 true 并且行为没有变化。然后我认为这可能是 React Portals 的问题，但是在直接通过 Portal 移除 Layer 并渲染之后，Select 的焦点与预期的一样。

【问题讨论】：

如果不在我们这边重现问题，就很难确定问题的原因。您能否提供您的 URL 或最小项目，以便我们进行检查？
@V.Airich 我已经确定了有关故障点的其他信息。这是否足以让您能够复制/验证/测试？

标签： reactjs typescript react-select testcafe office-ui-fabric

【解决方案1】：

这一切都归结为visibility！

Office UI Fabric 的 Layer 组件在其根元素上设置了 CSS 样式 visibility: hidden，即使其子元素具有 visibility: visible。参考：https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts#L28

通过覆盖可见性：

const layerStyles = { root: { visibility: 'visible'}}

在层组件上：styles={ layerStyles }

或在面板组件上：layerProps={{ styles: layerStyles }}

Select 变得可聚焦。

但是，这引入了另一个问题，即该层现在覆盖了整个应用程序。因此，我们必须更新layerStyles 以忽略指针事件。

const layerStyles = {
    root: {
        visibility: 'visible',
        pointerEvents: 'none',
    },
    content: {
        pointerEvents: 'auto',
    },
}

【讨论】：