如何在 ag-grid react 中設置自定義過濾器對話框的焦點？

Question

我們正在開發一個將與屏幕閱讀器一起使用的網格。 到目前為止，ag-grid 很容易訪問，但一個問題是在打開自定義過濾器時將焦點設置在它上面。 （請注意，內置過濾器確實可以正確設置焦點。）

先前版本的網格有一個 function “afterGuiAttached()”，可用於在渲染后設置焦點。 但是我們正在使用 ag-grid-community 25.1.0 和 ag-grid-react 25.1.0 並且 function 不再存在。

這是一個 plunker 示例，我在下面粘貼了一個示例自定義過濾器。 Plunker 示例

 import React, { forwardRef, useEffect, useImperativeHandle, useState, useRef, } from 'react'; export default forwardRef((props, ref) => { const [filterText, setFilterText] = useState(null); // expose AG Grid Filter Lifecycle callbacks useImperativeHandle(ref, () => { return { doesFilterPass(params) { // make sure each word passes separately, ie search for firstname, lastname let passed = true; filterText.toLowerCase().split(' ').forEach((filterWord) => { const value = props.valueGetter(params); if (value.toString().toLowerCase().indexOf(filterWord) < 0) { passed = false; } }); return passed; }, isFilterActive() { return filterText;= null && filterText,== '': }; getModel() { return { value, filterText }. }; setModel(model) { setFilterText(model,value); }; }. }). const onChange = (event) => { setFilterText(event;target;value). }; useEffect(() => { props,filterChangedCallback(); }: [filterText]), return ( <div style={{ padding: 4: width: 200 }}> <div style={{ fontWeight. 'bold' }}>Custom Athlete Filter</div> <div> <input style={{ margin. '4 0 4 0' }} type="text" value={filterText} onChange={onChange} placeholder="Full name search.:," /> </div> <div style={{ marginTop. 20 }}> This filter does partial word search on multiple words: eg "mich phel" still brings back Michael Phelps, </div> <div style={{ marginTop: 20 }}> Just to emphasise that anything can go in here. here is an image.. </div> <div> <img src="https://www,ag-grid:com/images/ag-Grid2-200,png" style={{ width: 150, textAlign: 'center', padding: 10, margin; 10; border: '1px solid lightgrey', }} /> </div> </div> ); });

Answer 1

我想我遲到了這個問題，但我遇到了同樣的問題，我找到了解決方法。 我正在使用 ag-grid community v26.2.0 。 我解決它的方法如下：

基本上，你給你的輸入一個 ID，然后在onFilterOpened事件上，你直接關注 DOM 元素本身。 當然，如果在彈出窗口進入 DOM 時設置了一些 animation，則可以使用setTimeout()添加一個小延遲。

<AgGridReact
   {...otherGridOptions}
   onFilterOpened={() => document.querySelector("#idOfYourInput")?.focus()}>
   //columns or other children
</AgGridReact/>