React Select 无法通过 TestCafe 聚焦在 Office UI Fabric 层中

Question

TestCafe 中似乎存在一个长期存在的问题，手动调用.focus()方法失败并导致问题：

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

可能相关： https : //github.com/DevExpress/testcafe/issues/3348

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

希望能够输入react-select的输入，然后选择所需的选项。 不幸的是， 先前询问并回答的 SO 线程无法正常工作。 可能是由于该线程处于活动状态以来的更新。

另一种选择是直接选择选项，但是，在我们的项目中，由于可用的选择项数量众多，我们最终需要使用react-virtualized 。 你可以在这里找到我在 SO 上的相关帖子。

我尝试过的方法：

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 组件存在冲突。 我们的项目在 Panel 组件内部渲染了 Select，我最初认为它的其中一个子元素 (FocusTrapZone) 是罪魁祸首，但是在单独渲染 Select 并在其周围单独包装组件之后，Layer 组件似乎是原因。

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

Answer 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',
    },
}