如何在 ag-grid react 中设置自定义过滤器对话框的焦点？

Question

We're developing a grid that will be used with screen readers. So far ag-grid is pretty accessible, but one issue is setting the focus on a custom filter when it's opened. (Note, the built in filters do set the focus correctly.)

Previous versions of the grid had a function "afterGuiAttached()" that could be used to set the focus after render. But we're using ag-grid-community 25.1.0 and ag-grid-react 25.1.0 and that function no longer exists.

Here is a plunker example and I've pasted a sample custom filter below. Plunker Example

 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

I guess I'm late to the question, but I was facing the same issue, and I found a workaround. I am using ag-grid community v26.2.0 . And the way I solved it is below:

Basically, you give your input an ID and on the onFilterOpened event, you do a direct focus on the DOM element itself. Of course you could add a small delay using setTimeout() if you have some animation set up while the popup is entering in the DOM.

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