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