[data grid] Autocomplete within filters not working as expected

[nicolasfripp]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/5p35km
2. Click on filters.
3. Add a filter for the "Age" column
4. add a filter to another column
5. See that the autocomplete gets re-rendered

Screen.Recording.2025-01-02.at.13.07.31.mov

Current behavior

The Autocomplete is re-drawn

Expected behavior

I hope that if the Datagrid component is re-rendered, the autocomplete won't be re-drawn (like the Select component).

Context

Im updating some states after applying some filter, which causes this weird behaviour on the Autocomplete. It is only happening in that component, if I use a Select, that does not happen

Your environment

No response

Search keywords: Autocomplete DataGrid DataGridPro filters

[michelengelen]

Thanks for opening an issue @nicolasfripp ... this is due to the fact that we are rendering the forms via a mapping and every state change rerenders this.

mui-x/packages/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx

Lines 257 to 272 in 0f66a53

	{validFilters.map((item, index) => (
	<GridFilterForm
	key={item.id == null ? index + readOnlyFilters.length : item.id}
	item={item}
	applyFilterChanges={applyFilter}
	deleteFilter={deleteFilter}
	hasMultipleFilters={hasMultipleFilters}
	showMultiFilterOperators={readOnlyFilters.length + index > 0}
	disableMultiFilterOperator={readOnlyFilters.length + index !== 1}
	applyMultiFilterOperatorChanges={applyFilterLogicOperator}
	focusElementRef={index === validFilters.length - 1 ? lastFilterRef : null}
	logicOperators={logicOperators}
	columnsSort={columnsSort}
	{...filterFormProps}
	/>
	))}

I know that @KenanYusuf is working on a new UI for the panels, so he probably is currently the best to talk to bout this. The main problem is that the filters are of a flexible amount and there is no easy way to memoize them.

For now I'll add this to the board and see what the team has to say about this. 👍🏼

[michelengelen]

We just discussed this in the team and @cherniavskii did point out that you need to make the columns array static for this to work, otherwise the InputComponent will render on every input due to state changes.

He did also create a quick Demo based on your implementation: here.

In this case moving the columns array outside of the component was enough, but in more complex situations you might need to implement a memoization (e.g. if you need to access component specific variables/functions).

So regarding this I will close the issue as it was implementation specific.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@nicolasfripp How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[nicolasfripp]

@michelengelen @cherniavskii Thanks for the response!
Unfortunately in our project it's not as simple as moving the columns outside! Could you tell me why this doesn't happen if I use a Select?

[nicolasfripp]

@michelengelen @cherniavskii , Here you have the same example but using a select instead:

https://codesandbox.io/p/sandbox/5p35km

Screen.Recording.2025-01-06.at.14.46.34.mov

[cherniavskii]

Hi @nicolasfripp

Unfortunately in our project it's not as simple as moving the columns outside!

Can you share more details?
It's recommended to keep the same reference for the columns prop:

Anyway, you can extract ageFilterOperators (or even InputComponent): https://codesandbox.io/p/sandbox/trying-something-forked-qm7zn3?file=%2Fsrc%2FDataGridDemo.tsx%3A104%2C1

Could you tell me why this doesn't happen if I use a Select?

I believe that's because Select doesn't use TextField (even though Select and Autocomplete are visually similar).
But the root issue persists for Select as well – it's unmounted and mounted again on each rerender.
The main takeaway is that a React component definition (InputComponent) must be referentially stable. The same problem is explained in https://mui.com/x/common-concepts/custom-components/#correct-usage

Let me know if this works for you.

[nicolasfripp]

@cherniavskii Thanks for your help! I was able to make it work. Memoizing the InputComponent element was the key!