fixes bug with repeater and flex content reinitializing too often

src/client/components/forms/Form/index.js

@@ -26,8 +26,7 @@ const reduceFieldsToValues = (fields) => {
     }
   });
 
-  const unflattened = unflatten(data);
-
+  const unflattened = unflatten(data, { safe: true });
   return unflattened;
 };
 

src/client/components/forms/field-types/Relationship/index.js

@@ -105,7 +105,7 @@ class Relationship extends Component {
     if (hasMultipleRelations) {
       options.forEach((option) => {
         const potentialValue = option.options.find((subOption) => {
-          if (subOption.value && subOption.value.value && value && value.value) {
+          if (subOption?.value?.value && value?.value) {
             return subOption.value.value === value.value;
           }
 

src/client/components/forms/field-types/Repeater/index.js

@@ -108,7 +108,7 @@ const Repeater = (props) => {
         },
       ]), []),
     });
-  }, [dataToInitialize, setValue]);
+  }, [dataToInitialize]);
 
   return (
     <DragDropContext onDragEnd={onDragEnd}>
@@ -143,6 +143,8 @@ const Repeater = (props) => {
                     initialData={row.data}
                     dispatchRows={dispatchRows}
                     customComponentsPath={`${customComponentsPath}${name}.fields.`}
+                    positionHandleVerticalAlignment="sticky"
+                    actionHandleVerticalAlignment="sticky"
                   />
                 );
               })

src/client/components/forms/field-types/shared.scss

@@ -39,6 +39,10 @@
     &:disabled {
       background: $color-light-gray;
       color: $color-gray;
+
+      &:hover {
+        border-color: $color-light-gray;
+      }
     }
 
     @include small-break {

src/client/scss/vars.scss

@@ -74,14 +74,16 @@ $style-stroke-width-m : 2px;
 }
 
 @mixin inputShadow {
-	@include shadow-sm;
+  @include shadow-sm;
 
-  &:hover {
-		box-shadow: 0 2px 3px 0 rgba(0, 2, 4, 0.13), 0 6px 4px -4px rgba(0, 2, 4, 0.1);
-	}
+  &:not(:disabled) {
+    &:hover {
+      box-shadow: 0 2px 3px 0 rgba(0, 2, 4, 0.13), 0 6px 4px -4px rgba(0, 2, 4, 0.1);
+    }
 
-	&:active, &:focus {
-    @include inputShadowActive;
+    &:active, &:focus {
+      @include inputShadowActive;
+    }
   }
 }