Fix InputGroup not refreshing when selecting a different element

src/Components/ContainerProperties/ContainerForm.tsx

@@ -62,6 +62,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         value={props.properties.type}
         isDisabled={true} />
       <TextInputGroup
+        key={`${props.properties.id}-displayedText`}
         labelText='Displayed text'
         inputKey='displayedText'
         labelClassName=''
@@ -70,6 +71,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         value={props.properties.displayedText?.toString()}
         onChange={(value) => props.onChange('displayedText', value)} />
       <TextInputGroup
+        key={`${props.properties.id}-x`}
         labelText='x'
         inputKey='x'
         labelClassName=''
@@ -89,6 +91,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
           )
         )} />
       <TextInputGroup
+        key={`${props.properties.id}-y`}
         labelText='y'
         inputKey='y'
         labelClassName=''
@@ -97,6 +100,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         value={(props.properties.y - (props.properties.margin?.top ?? 0)).toString()}
         onChange={(value) => props.onChange('y', Number(value) + (props.properties.margin?.top ?? 0))} />
       <TextInputGroup
+        key={`${props.properties.id}-minWidth`}
         labelText='Minimum width'
         inputKey='minWidth'
         labelClassName=''
@@ -106,6 +110,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         value={props.properties.minWidth.toString()}
         onChange={(value) => props.onChange('minWidth', Number(value))} />
       <TextInputGroup
+        key={`${props.properties.id}-maxWidth`}
         labelText='Maximum width'
         inputKey='maxWidth'
         labelClassName=''
@@ -115,6 +120,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         value={props.properties.maxWidth.toString()}
         onChange={(value) => props.onChange('maxWidth', Number(value))} />
       <TextInputGroup
+        key={`${props.properties.id}-width`}
         labelText='Width'
         inputKey='width'
         labelClassName=''
@@ -126,6 +132,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         onChange={(value) => props.onChange('width', ApplyWidthMargin(Number(value), props.properties.margin.left, props.properties.margin.right))}
         isDisabled={props.properties.isFlex} />
       <TextInputGroup
+        key={`${props.properties.id}-height`}
         labelText='Height'
         inputKey='height'
         labelClassName=''
@@ -135,6 +142,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         value={(props.properties.height + (props.properties.margin?.top ?? 0) + (props.properties.margin?.bottom ?? 0)).toString()}
         onChange={(value) => props.onChange('height', Number(value) - (props.properties.margin?.top ?? 0) - (props.properties.margin?.bottom ?? 0))} />
       <TextInputGroup
+        key={`${props.properties.id}-ml`}
         labelText='Margin left'
         inputKey='left'
         labelClassName=''
@@ -144,6 +152,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         value={(props.properties.margin.left ?? 0).toString()}
         onChange={(value) => props.onChange('left', Number(value), PropertyType.Margin)} />
       <TextInputGroup
+        key={`${props.properties.id}-mb`}
         labelText='Margin bottom'
         inputKey='bottom'
         labelClassName=''
@@ -153,6 +162,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         value={(props.properties.margin.bottom ?? 0).toString()}
         onChange={(value) => props.onChange('bottom', Number(value), PropertyType.Margin)} />
       <TextInputGroup
+        key={`${props.properties.id}-mt`}
         labelText='Margin top'
         inputKey='top'
         labelClassName=''
@@ -162,6 +172,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         value={(props.properties.margin.top ?? 0).toString()}
         onChange={(value) => props.onChange('top', Number(value), PropertyType.Margin)} />
       <TextInputGroup
+        key={`${props.properties.id}-mr`}
         labelText='Margin right'
         inputKey='right'
         labelClassName=''

src/Components/InputGroup/TextInputGroup.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 
 interface ITextInputGroupProps {
+  /** Use key the same way as React.Key */
+  key: string
   labelKey?: string
   labelText: string
   inputKey: string
@@ -22,7 +24,7 @@ export function TextInputGroup(props: ITextInputGroupProps): JSX.Element {
 
   React.useEffect(() => {
     setValue(props.value);
-  }, [props.value]);
+  }, [props.value, props.key]);
 
   function OnKeyUp(event: React.KeyboardEvent): void {
     switch (event.key) {