Describe the bug
I have two components, a modal and a table component (MUI 5 + react-table). I update the server state from the modal, so eventually a new row is added to the table. However, when I try to select the row immediately after updating the server state (even with an optimistic update), a racing condition occurs and I get an exception from the react-table hook.
This is where I update the state, in a modal component.
const patchResult = dispatch(
api.util.updateQueryData('listCharactersByProject', { projectId }, (draft) => {
draft.push(newCharacterInput as CharacterFromListQuery);
})
);
const newCharacter = await createCharacter({ input: newCharacterInput })
.unwrap()
.catch(() => patchResult.undo());
const episodeCast = await createEpisodeCast({
input: {
episodeId: episodeId!,
characterId: newCharacter?.id!,
orderIndex: newCharacter?.orderIndex!,
},
}).unwrap();
if (episodeCast?.characterId) {
modal.resolve({ characterId: episodeCast.characterId, isNewCharacter: true });
modal.remove();
}
Then, in the table component I do this:
const handleAddCharacter = useCallback(async () => {
clearCharacterSelection();
const { characterId, isNewCharacter } = (await NiceModal.show(AddCharacterModal, { projectId, episodeId })) as {
characterId: string;
isNewCharacter: boolean;
};
if (isNewCharacter && characterId) {
tableRef.current?.toggleAllRowsSelected(false);
tableRef.current?.toggleRowSelected(characterId, true); // throws an error
tableRef.current?.scrollToRow(characterId);
}
}, [projectId, episodeId, clearCharacterSelection]);
Your minimal, reproducible example
Pasted some code above.
Steps to reproduce
Update the table state and then try to select the row.
Expected behavior
The newly created row should be rendered and selected.
How often does this bug happen?
No response
Screenshots or Videos
No response
Platform
macOS
react-table version
v7.6.3
TypeScript version
v4.5.4
Additional context
No response
Terms & Code of Conduct
Describe the bug
I have two components, a modal and a table component (MUI 5 +
react-table). I update the server state from the modal, so eventually a new row is added to the table. However, when I try to select the row immediately after updating the server state (even with an optimistic update), a racing condition occurs and I get an exception from thereact-tablehook.This is where I update the state, in a modal component.
Then, in the table component I do this:
Your minimal, reproducible example
Pasted some code above.
Steps to reproduce
Update the table state and then try to select the row.
Expected behavior
The newly created row should be rendered and selected.
How often does this bug happen?
No response
Screenshots or Videos
No response
Platform
macOS
react-table version
v7.6.3
TypeScript version
v4.5.4
Additional context
No response
Terms & Code of Conduct