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

【问题标题】：How to set focus on a custom filter dialog in ag-grid react?如何在 ag-grid react 中设置自定义过滤器对话框的焦点？
【发布时间】：2022-01-16 21:05:44
【问题描述】：

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

先前版本的网格有一个函数“afterGuiAttached()”，可用于在渲染后设置焦点。但是我们正在使用 ag-grid-community 25.1.0 和 ag-grid-react 25.1.0，并且该功能不再存在。

这是一个 plunker 示例，我在下面粘贴了一个示例自定义过滤器。 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>
  );
});

【问题讨论】：

标签： reactjs accessibility ag-grid

【解决方案1】：

我想我迟到了，但我遇到了同样的问题，我找到了解决方法。我正在使用 ag-grid community v26.2.0。而我解决的方法如下。

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

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

【讨论】：