I have the following advanced autocomplete logic in the past I used key to re render the whole component after submitting a form that is located else where any idea how to rest it the proper way ? my problem is I need to find a way to connect a value in to it a value that is connected to state some how and when my form will submit and the value will rest, (rest value will be triggered during submitting) so the autocomplete value will rest as well any idea how to integrate value using state in to this logic ?
const options = [{name : 'some option' , optionType : 'some type', tool : 'some tool'}, ...]
<Autocomplete
id='advancedselect'
ref={refAutocomplete}
options={options.sort((a, b) => -b.optionType.localeCompare(a.optionType))}
groupBy={(option: any) => option.optionType}
getOptionLabel={(option) => option.name}
renderOption={(option) => (
<React.Fragment>
<div style={{ width: '12vw', maxWidth: 75, marginRight: 10, padding: 0 }}>
<IconsOption img={option.tool} />
</div>
{option.name}
</React.Fragment>
)}
//value={val}
//onChange={(event) => setVal(event.currentTarget)}
//getOptionSelected={(option, value) => option.name === value.name}
PaperComponent={({ children }) => <Paper className={classes.backDrop}>{children}</Paper>}
PopperComponent={(props: any) => <Popper open={open.open} anchorEl={open.anchorEl} {...props} className={classes.popper} placement='bottom'></Popper>}
onClose={() => setOpen({ /*anchorEl: null,*/ ...open, open: false })}
onOpen={(event: any) => {
const { currentTarget } = event;
setOpen({
anchorEl: currentTarget,
open: true,
});
}}
onInputChange={handleAutoComplete}
className={classes.root}
renderInput={(params) => (
<TextField
name='field'
error={err.exercise ? true : false}
onChange={handleTextField}
{...params}
InputLabelProps={{ shrink: false }}
label={!text.length && !selected.stateOptions? `Selectd Opitons !!` : ' '}
onBlur={restTextOnBlurCond}
autoComplete='off'
/>
)}
/>