fix(web): fix values persisting across input dialogs opened quickly

web/src/features/dialog/InputDialog.tsx

@@ -72,10 +72,9 @@ const InputDialog: React.FC = () => {
           <ModalHeader textAlign="center">{fields.heading}</ModalHeader>
           <ModalBody fontFamily="Poppins" textAlign="left">
             {fields.rows.map((row: IInput | ICheckbox | ISelect | INumber | ISlider, index) => (
-              <React.Fragment key={`row-${index}`}>
+              <React.Fragment key={`row-${index}-${row.type}-${row.label}`}>
                 {row.type === 'input' && (
                   <InputField
-                    key={`input-${index}`}
                     row={row}
                     index={index}
                     handleChange={handleChange}

web/src/features/dialog/components/fields/checkbox.tsx

@@ -16,7 +16,7 @@ const CheckboxField: React.FC<Props> = (props) => {
 
   return (
     <>
-      <Box mb={3} key={`checkbox-${props.index}`}>
+      <Box mb={3}>
         <Checkbox
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => props.handleChange(e.target.checked, props.index)}
           defaultChecked={props.row.checked}

web/src/features/dialog/components/fields/select.tsx

@@ -21,7 +21,7 @@ const SelectField: React.FC<Props> = (props) => {
 
   return (
     <>
-      <Box mb={3} key={`select-${props.row.label}-${props.index}`}>
+      <Box mb={3}>
         <Select
           onChange={(e: React.ChangeEvent<HTMLSelectElement>) => props.handleChange(e.target.value, props.index)}
           defaultValue={props.row.default || ''}

web/src/features/dialog/components/fields/slider.tsx

@@ -18,7 +18,7 @@ const SliderField: React.FC<Props> = (props) => {
 
   return (
     <>
-      <Box mb={3} key={`slider-${props.index}`}>
+      <Box mb={3}>
         <Label label={props.row.label} description={props.row.description} />
         <Slider
           onChangeEnd={(val: number) => props.handleChange(val, props.index)}