Пользовательский фильтр AG Grid Реагирует на компонент, не вызывающий afterGuiAttached при первом открытии после обновления до версии 22

Question

В настоящее время мы выполняем обновление AG-Grid с версии 18 до версии 22, и я заметил, что метод afterGuiAttached не вызывается при первом открытии нашего пользовательского компонента фильтра. Мне было интересно, может быть, компоненту не хватает чего-то, что требуется в AG Grid 22, которое я не заметил, чтобы это произошло. Или, если это проблема с новой версией AG Grid. Я тестировал тот же код в AG Grid версии 18, и с этим же кодом это не проблема.

interface IMultiSearchFilterState {
  searchText: string;
  hideFilter?: () => void;
  currentFilter: string;
}

export class MultiSearchFilter extends React.Component<IFilterParams, IMultiSearchFilterState> {
  private searchInput = React.createRef<HTMLInputElement>();

  public state: IMultiSearchFilterState = {
    searchText: '',
    currentFilter: ''
  };

  public isFilterActive = () => {
    return this.state.searchText !== '';
  };

  public getModel = (): IAgCollectionFilter | void => {
    if (!this.isFilterActive()) {
      return;
    }

    return { filterType: 'collection', filter: this.state.searchText.split(/[ ,]+/) };
  };

  public setModel = (model?: IAgCollectionFilter) => {
    const text = model ? model.filter.join(', ') : '';
    this.setState({ searchText: text, currentFilter: text }, () =>
      this.props.filterChangedCallback()
    );
  };

  public afterGuiAttached = (params: { hidePopup: () => void }) => {
    if (this.searchInput.current) {
      this.searchInput.current.focus();
    }
    this.setState(() => ({ hideFilter: params.hidePopup }));
  };

  private handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = e.target;

    this.setState(() => ({ searchText: value }));
  };

  private handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const { hideFilter } = this.state;
    if (!hideFilter) {
      return;
    }

    if (this.state.searchText === this.state.currentFilter) {
      hideFilter();
      return;
    }
    this.setState(
      ({ searchText, ...otherState }) => ({
        ...otherState,
        currentFilter: searchText
      }),
      () => {
        this.props.filterChangedCallback();
        hideFilter();
      }
    );
  };

  public render(): React.ReactElement {
    return (
      <form className='multi-search-filter' onSubmit={this.handleSubmit}>
        <input ref={this.searchInput} onChange={this.handleChange} value={this.state.searchText} />
        <button type='submit'>OK</button>
      </form>
    );
  }
}