Add workaround to load multiple radio-tile-groups asynchronously (#283)

* fix: Add workaround to load multiple radio-tile-groups asynchronously Signed-off-by: Akshat Patel <[email protected]> * chore: Update comment Signed-off-by: Akshat Patel <[email protected]> --------- Signed-off-by: Akshat Patel <[email protected]>
IBM · Oct 13, 2023 · 343219f · 343219f
1 parent b57dc54
commit 343219f
Showing 1 changed file with 20 additions and 10 deletions.
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
@@ -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
 	}, []);