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

Question

[似乎在TestCafe中存在一个长期存在的问题，在该问题中，手动调用.focus()方法无效，并随后导致问题：

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

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

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

希望能够输入react-select的输入，然后选择所需的选项。不幸的是，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 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

通过覆盖此图层，面板上的styles={{ root: { visibility: 'visible' }}}或面板上的layerProps={{ styles: { root: { visibility: 'visible' }} }}，Select将变得可聚焦。