如何在ag grid react中设置对自定义过滤器对话框的关注

Question

我们正在开发一个将与屏幕阅读器一起使用的网格。到目前为止，ag网格非常容易访问，但有一个问题是在打开时将焦点设置在自定义过滤器上。(注意，内置过滤器确实正确设置了焦点。(

以前版本的网格具有一个函数"；afterGuiAttached(("可用于在渲染后设置焦点。但我们使用的是ag网格社区25.1.0和ag网格反应25.1.0，而这个功能已经不存在了。

下面是一个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社区版本26.2.0。我解决这个问题的方法如下。

基本上，您给输入一个ID，在onFilterOpened事件上，您直接关注DOM元素本身。当然，如果在弹出窗口进入DOM时设置了一些动画，则可以使用setTimeout()添加一个小延迟。

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