[data grid] AutoComplete looses focus on first selection after user starts typing

[BeckmannArmin]

The problem in depth

Hey,

We are using custom filter operators in our application to render a Autocomplete inside the header filter cell to let the user search and select multiple values to filter the data inside the DataGrid.

However when using a Autocomplete as a header filter only every second input is registered. The component itself seems to loose its focus when you first focus it and then start typing on your keyboard.

I tried to debug it and stumbled across the layoutEffect function inside GridHeaderFilterCell.js (line 92-102)

React.useLayoutEffect(() => { if (hasFocus && !isMenuOpen) { let focusableElement = cellRef.current.querySelector('[tabindex="0"]'); if (isEditing && InputComponent) { focusableElement = inputRef.current; } const elementToFocus = focusableElement || cellRef.current; elementToFocus?.focus(); apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0; } }, [InputComponent, apiRef, hasFocus, isEditing, isMenuOpen]);

Maybe this is the right palce to look for.

Here is an example

Steps to reproduce:

1. Select the rating field
2. Start typing -> The popover should disappear and the field blurs.
3. After selecting it again (when already selected) it seems to work
4. As soon as you select another textfield and go back to the rating field (or any other field with the Autocomplete component) it does not work anymore.

We are expecting that the user can start typing as soon as he selects the field.

Your environment

`npx @mui/envinfo`

 Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Search keywords: autocomplete
Order ID: 83002

[KenanYusuf]

Thanks for reporting the issue @BeckmannArmin, I have also managed to reproduce the issue using your example, and my own example forked from the custom header filter demo.

I will add this to the board for prioritisation.

[BeckmannArmin]

Thanks for reporting the issue @BeckmannArmin, I have also managed to reproduce the issue using your example, and my own example forked from the custom header filter demo.

I will add this to the board for prioritisation.

Thanks. Sounds "good" that this is an issue for everyone and not on our end. Will you update here once the issue is resolved?

[KenanYusuf]

@BeckmannArmin yes, we will update this issue when a fix is available.

[KenanYusuf]

This issue might be related to #13734

[BeckmannArmin]

@KenanYusuf Are there any updates? Our users are wating desperately for a fix. We re running our app in a productive environment where every clicks costs time (money).

[KenanYusuf]

@KenanYusuf Are there any updates? Our users are wating desperately for a fix. We re running our app in a productive environment where every clicks costs time (money).

Working on a fix for this @BeckmannArmin - should be available soon.

[KenanYusuf]

Hey @BeckmannArmin

@MBilalShafi took a look at your example and managed to fix the issue you were seeing by passing inputRef={props.inputRef} to the TextField component.

const renderInput = useCallback((params) => {
  return (
    <TextField
      {...params}
      variant="standard" />
++    inputRef={props.inputRef}
    />
  );
}, []);

Hopefully that solves it, but let me know if you're still experiencing the problem.

[BeckmannArmin]

Hey @BeckmannArmin

@MBilalShafi took a look at your example and managed to fix the issue you were seeing by passing inputRef={props.inputRef} to the TextField component.

const renderInput = useCallback((params) => {
  return (
    <TextField
      {...params}
      variant="standard" />
++    inputRef={props.inputRef}
    />
  );
}, []);

Hopefully that solves it, but let me know if you're still experiencing the problem.

 inputRef={props.inputRef}

inputRef does not exist in the props validation. Neither does it in the params for the renderInput function.
Where did you get it from?

[BeckmannArmin]

Could you provide or adjust the example from above accordingly? @KenanYusuf

[michelengelen]

Hey @BeckmannArmin ... The inputRef is coming from the GridFilterOperator['InputComponent'] type. We type this as React.JSXElementConstructor<any>, so it is not clear from the types immediately.
We do pass the inputRef during the internal rendering of the GridHeaderFilterCell component.
Reference:

mui-x/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx

Lines 329 to 334 in 883d1f8

	<InputComponent
	apiRef={apiRef}
	item={item}
	inputRef={inputRef}
	applyValue={applyFilterChanges}
	onFocus={() => apiRef.current.startHeaderFilterEditMode(colDef.field)}

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.