useFieldArray with MUI AutoComplete Component flickers when new items are appended

[vikasm361]

Hi ,
i have created a Form which uses react-hook-form. The form is dynamic and uses the useFieldArray to add the dropdowns dynamically , the dropdowns are created using the Material UI Autocomplete/TextField combo. There is a button to add the dropdown dynamically on the screen using the append method of useFieldArray. I see that the dropdown flickers as and when i add new dropdowns. This occurs only if i import the FormState.Errors or FormState.isValid in the screen. Please note the Autocomplete is a controlled component.

This code sample from codeSandBox demonstrates the issue .
is there a way to avoid this flicker issue? what might be causing it?

[patorjk]

I'm pretty sure this is a bug in MUI's Autocomplete control. I was having the exact same issue - I have a form using react-hook-form with useFieldArray and MUI's Autocomplete - and I kept seeing an annoying flicker. After putting in a lot of debug statements, I discovered that MUI passes a value of "" to the Autocomplete's textfield when the control is initially rendered (even though the Autocomplete has a value). Normally this isn't an issue, but if a component above your autocomplete has a "key" prop, it'll completely re-render and you'll see the flicker when this happens. You can see the issue in-depth in this modified version of your codesandbox: (you'll need to open the developer console)

https://codesandbox.io/p/sandbox/objective-cannon-9m3gtz?file=%2Fsrc%2FfieldArray.js

I was able to "fix" it by writing a wrapper component around TextField. This wrapper would check and see if TextField had been touched, and if not it would use a default value that I passed in (rather than ""). Once touched it would start using the value from params.inputProps.value.

Hopefully you were able to find a workaround, I'm mostly writing this for anyone else who comes across this issue. I may file a bug report with MUI later.

[DanRutledge]

Thanks for this comment. I was also able to solve my autocomplete flickering/blinking problem by using a wrapper component around the TextField. This was the only helpful solution I found on StackOverflow or Github. Appreciate it @patorjk

[1010nishant]

Could someone provide me with the code i am getting this problem.
link of sandbox is not functioning for me.

[1010nishant]

@DanRutledge and @patorjk, could you please share a code sandbox for this fix? I appreciate your help.

[DanRutledge]

@1010nishant It's been a while since I worked on this code, so I'm sorry this is not a completely working code sandbox, but what I did, based on the guidance above is create a wrapper component of the Textfield that forced the value to be what I wanted it to be. I passed in a 'secretValue' variable and used it to override the value. Hopefully this helps:

const TextWrapper = (props) => {
const newProps = {...props, inputProps: {...props.inputProps, value: props.secretValue}};
delete newProps.secretValue;
return (
<TextField
{...newProps}
/>
)
}

<Autocomplete
id="myId"
options={timeList}
noOptionsText={'Type the format h:mm am/pm'}
getOptionLabel={(time) => time.label }
onInputChange={(e, newValue) => {selectTime(newValue);}}
value={rowStart}
renderOption={ (props, option) => {
// jsx does not like the key passed in props
const key=props.key;
const propsWithoutKey = {...props};
delete propsWithoutKey.key;
return (
<MenuItem key={key} {...propsWithoutKey}>{option}
)
}}
renderInput={(params) => {
// Text wrapper ensures the initial value is what you want it to be
return (
<TextWrapper
secretValue={rowStart}
{...params}
variant="standard"
/>
)}}
/>

[1010nishant]

@DanRutledge thanks buddy it worked for me!