diff --git a/src/sdk/src/fragment-components/tiles/a-radio-tile-group.tsx b/src/sdk/src/fragment-components/tiles/a-radio-tile-group.tsx index 934e030b3..2e615d3b4 100644 --- a/src/sdk/src/fragment-components/tiles/a-radio-tile-group.tsx +++ b/src/sdk/src/fragment-components/tiles/a-radio-tile-group.tsx @@ -112,16 +112,26 @@ export const ARadioTileGroup = ({ }, ...parentComponent.items.slice(componentIndex + 1) ]; - setFragment({ - ...fragment, - data: updatedState(fragment.data, { - type: 'update', - component: { - ...parentComponent, - items - } - }) - }, false); + + /** + * If there are multiple radio-tile-groups rendering at once, + * they will attempt to overwrite the state together causing the edit mode to break + * + * Ideally, we should be using an arrow function with previousState to resolve this scenario. + * However, we don’t know which fragment we’re updating until we read the id from the model. + */ + setTimeout(() => { + setFragment({ + ...fragment, + data: updatedState(fragment.data, { + type: 'update', + component: { + ...parentComponent, + items + } + }) + }, false); + }); // Disabling since we want to call this only once to initialize children `formItemName` attribute in code context // eslint-disable-next-line react-hooks/exhaustive-deps }, []);