fix: watch value prop change

contentful · Nov 23, 2020 · 22b81a1 · 22b81a1
1 parent 11c77ee
commit 22b81a1
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 0 deletions.
diff --git a/packages/forma-36-react-components/src/components/Select/Select.tsx b/packages/forma-36-react-components/src/components/Select/Select.tsx
@@ -1,5 +1,6 @@
 import React, {
   useCallback,
+  useEffect,
   useState,
   ChangeEventHandler,
   FocusEventHandler,
@@ -76,6 +77,10 @@ export const Select = (props: SelectProps) => {
     [onChange, isDisabled],
   );
 
+  useEffect(() => {
+    setValueState(value);
+  }, [value]);
+
   const widthClass = `Select--${width}`;
   const classNames = cn(styles['Select'], {
     [styles['Select--disabled']]: isDisabled,

diff --git a/packages/forma-36-react-components/src/components/SelectField/SelectField.tsx b/packages/forma-36-react-components/src/components/SelectField/SelectField.tsx
@@ -1,4 +1,5 @@
 import React, {
+  useEffect,
   useState,
   ChangeEvent,
   FocusEventHandler,
@@ -71,6 +72,10 @@ export const SelectField = (props: SelectFieldProps) => {
     }
   };
 
+  useEffect(() => {
+    setValueState(value);
+  }, [value]);
+
   const classNames = cn(styles['SelectField'], className);
 
   return (

diff --git a/packages/forma-36-react-components/src/components/TextInput/TextInput.tsx b/packages/forma-36-react-components/src/components/TextInput/TextInput.tsx
@@ -1,5 +1,6 @@
 import React, {
   useState,
+  useEffect,
   useCallback,
   RefObject,
   FocusEvent,
@@ -108,6 +109,10 @@ export const TextInput = (props: TextInputProps) => {
     [willBlurOnEsc, onKeyDown],
   );
 
+  useEffect(() => {
+    setValueState(value);
+  }, [value]);
+
   const widthClass = `TextInput--${width}`;
   const classNames = cn(styles['TextInput'], className, styles[widthClass], {
     [styles['TextInput--disabled']]: disabled,