From 3a684abf571eced608b760215e5d2febc4dc194c Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 2 Jul 2023 02:23:00 -0700
Subject: [PATCH] Fixes bug with SliderTablefield control

This fixes a bug where the SliderTableField's slider was not changing the input's value.

We essentially let the parent component control the value so the component is only ever reading from props, instead of using its stored state as a display.
---
 components/common/SliderTableField/index.tsx | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/components/common/SliderTableField/index.tsx b/components/common/SliderTableField/index.tsx
index 51d369ea..00108118 100644
--- a/components/common/SliderTableField/index.tsx
+++ b/components/common/SliderTableField/index.tsx
@@ -3,8 +3,6 @@ import Input from '~components/common/Input'
 import Slider from '~components/common/Slider'
 import TableField from '~components/common/TableField'
 
-import styles from './index.module.scss'
-
 interface Props {
   name: string
   label: string
@@ -26,12 +24,9 @@ const SliderTableField = (props: Props) => {
   const [value, setValue] = useState(props.value)
 
   useEffect(() => {
-    if (props.value !== undefined && props.value !== value)
-      setValue(props.value)
-  }, [props.value])
-
-  useEffect(() => {
-    if (value !== undefined && value !== props.value) props.onValueChange(value)
+    if (value !== undefined && value !== props.value) {
+      props.onValueChange(value)
+    }
   }, [value])
 
   function handleValueCommit(value: number[]) {
@@ -58,7 +53,7 @@ const SliderTableField = (props: Props) => {
         min={props.min}
         max={props.max}
         step={props.step}
-        value={[value ? value : 0]}
+        value={[props.value ? props.value : 0]}
         onValueChange={handleValueChange}
         onValueCommit={handleValueCommit}
       />
@@ -66,7 +61,7 @@ const SliderTableField = (props: Props) => {
         className="number"
         bound={true}
         type="number"
-        value={`${value}`}
+        value={`${props.value}`}
         min={props.min}
         max={props.max}
         step={props.step}