Autocomplete

[NarenderSiri]

Hi,
I have 5 columns in a table. 1 autocomplete 4 text fields.
When onchange i will call Api for the list of options in the Autocomplete.
When Onselect the Autocomplete I will call the another Api through id to get multiple records to append in same row text fields.
Please do sample sandbox .
Please

[mbartoszewski]

Maybe below code will help you:

const columns = React.useMemo(() => [
		{
			Header: 'Code', accessor: 'thing.code',
			Cell: function Cell({cell, row, column, handleThingChange, value: initialValue})
			{
				const [value, setValue] = React.useState(initialValue)
				const [thing, setThing] = React.useState({})
				const onChange = (event, nValue) =>
				{
					setValue(nValue.code)
					setThing(nValue)
					doFetch({url: "apiCall"})
				}

				const onBlur = () =>
				{
					handleThingChange(row, column, value, thing)
				}

				React.useEffect(() =>
				{
					setValue(initialValue)
				}, [initialValue])

              const code =  <Autocomplete
					id="autocomplete-thing"
				  	size="string"
				  	sx={{minWidth:"150px"}}
				  	type="text"
				  	onChange={(event, nValue) => {onChange(event, nValue)}}
					onBlur={onBlur}
				  	fullWidth={true}
					disabled={(docState === docStates.EDIT || docState === docStates.ADD) ? false : true }
				  	options={things !== null ? things : [0]} 
				 	value={{code: value}} 
				  	getOptionLabel={(option) => option.code}
					isOptionEqualToValue={(option, value) => option.code == value.code}
					renderInput={(params) => <TextField size="string" type="text" variant="standard" {...params} />} />;	
				
				return code;
			},`

[NarenderSiri]

tq so much

[sudarshan-mane]

@mbartoszewski
[Tanstack Table cell which is Combobox causing re render which is closing the popover and user is unable to type in input field]

As per doc-

We have Memoize column and data both,
All the components inside column are created seprate component outside table.
Issue - -We have table cell which is combobox. Combobox has search input and options. -When we type anything in search input, using next js server action, we get options from backend. So after typing every letter, options are changing, which cause table re-renders.

Issue Video - https://www.loom.com/share/9f173bd1249041d78c11773e8f8d265e?sid=3210ddaa-8e0d-43ee-8d73-c5d3293e7bad

Code Sandbox: https://codesandbox.io/p/github/rkandwal300/tanstack-table-issue/master

We are stuck with the issue since a week, we appreciate any help. Thanks in Advance.

[garimabeli]

@sudarshan-mane were you able to find any solution? I am having similar issue.
I have a search autocomplete inside a cell which goes out of focus on typing and closes the popover content as on updating the current row it re-renders the whole table. Thanks