fix: TextField defaultValue change (#2388)

* fix: TextField defaultValue change

* fix test

* update webDemo to demonstrate text field default value

* code review + add tests

* Update webDemo/package.json

Co-authored-by: Lidor Dafna <[email protected]>

* fix demo & and tests

* fix lint

Co-authored-by: Lidor Dafna <[email protected]>
Co-authored-by: Lidor Dafna <[email protected]>

Author: AmitShwarts

src/incubator/TextField/__tests__/index.spec.js

@@ -1,6 +1,7 @@
 import React, {useState} from 'react';
 import {fireEvent, render} from '@testing-library/react-native';
 import TextField from '../index';
+import {Constants} from '../../../commons/new';
 
 const defaultProps = {
   testID: 'field',
@@ -29,7 +30,7 @@ describe('TextField', () => {
 
       const input = renderTree.getByTestId('field');
       renderTree.getByPlaceholderText(defaultProps.placeholder);
-      
+
       fireEvent(input, 'focus');
       renderTree.getByPlaceholderText(defaultProps.placeholder);
     });
@@ -83,4 +84,37 @@ describe('TextField', () => {
       expect(validationMessageElement).toBe(null);
     });
   });
+
+  describe('defaultValue', () => {
+    const props = {
+      ...defaultProps,
+      defaultValue: 'someDefaultValue',
+      value: 'someValue'
+    };
+
+    it('value should equal defaultValue on first render when value not given', () => {
+      const renderTree = render(<TestCase {...props} value={undefined}/>);
+
+      renderTree.getByDisplayValue('someDefaultValue');
+    });
+
+    it('value should equal value on first render when given', () => {
+      const renderTree = render(<TestCase {...props} defaultValue={undefined}/>);
+
+      renderTree.getByDisplayValue('someValue');
+    });
+
+    it.each`
+    platform    | isWeb
+    ${'web'}    | ${true}
+    ${'native'} | ${false}
+    `('on $platform should reset defaultValue when prop changed after first render', (args) => {
+      Constants.isWeb = args.isWeb;
+
+      const renderTree = render(<TestCase {...props} value={undefined}/>);
+
+      renderTree.rerender(<TestCase {...props} value={undefined} defaultValue={'someUpdatedDefaultValue'}/>);
+      renderTree.getByDisplayValue('someUpdatedDefaultValue');
+    });
+  });
 });

src/incubator/TextField/index.tsx

@@ -167,6 +167,7 @@ const TextField = (props: InternalTextFieldProps) => {
                 onChangeText={onChangeText}
                 placeholder={placeholder}
                 hint={hint}
+                value={fieldState.value}
               />
             </View>
           )}

src/incubator/TextField/useFieldState.ts

@@ -3,6 +3,7 @@ import _ from 'lodash';
 import * as Presenter from './Presenter';
 import {useDidUpdate} from 'hooks';
 import {FieldStateProps} from './types';
+import {Constants} from '../../commons/new';
 
 export default function useFieldState({
   validate,
@@ -13,11 +14,24 @@ export default function useFieldState({
   onChangeValidity,
   ...props
 }: FieldStateProps) {
-  const [value, setValue] = useState(props.value);
+  const [value, setValue] = useState(props.value ?? props.defaultValue);
   const [isFocused, setIsFocused] = useState(false);
   const [isValid, setIsValid] = useState<boolean | undefined>(undefined);
   const [failingValidatorIndex, setFailingValidatorIndex] = useState<number | undefined>(undefined);
 
+  useEffect(() => {
+    if (Constants.isWeb && !props.value && props.defaultValue && props.defaultValue !== value) {
+      setValue(props.defaultValue);
+
+      if (validateOnChange) {
+        validateField(props.defaultValue);
+      }
+    }
+
+    /* On purpose listen only to props.defaultValue change */
+    /* eslint-disable-next-line react-hooks/exhaustive-deps*/
+  }, [props.defaultValue, validateOnChange]);
+
   useEffect(() => {
     if (validateOnStart) {
       validateField();

webDemo/package.json

@@ -28,7 +28,7 @@
     "react-native-shimmer-placeholder": "^2.0.8",
     "react-native-svg": "^12.1.0",
     "react-native-svg-transformer": "^0.14.3",
-    "react-native-ui-lib": "6.21.2-snapshot.1927",
+    "react-native-ui-lib": "snapshot",
     "react-native-web": "^0.18.6",
     "typescript": "^4.4.2"
   },

webDemo/src/App.tsx

@@ -1,7 +1,7 @@
 import React, {useState, useRef} from 'react';
 import {StyleSheet, ScrollView, ActivityIndicator, Animated} from 'react-native';
 
-import TextField from 'react-native-ui-lib/TextField';
+// import TextField from 'react-native-ui-lib/TextField';
 import View from 'react-native-ui-lib/View';
 import Button from 'react-native-ui-lib/Button';
 import Switch from 'react-native-ui-lib/Switch';
@@ -18,7 +18,14 @@ import AnimatedImage from 'react-native-ui-lib/AnimatedImage';
 import Avatar from 'react-native-ui-lib/Avatar';
 import Drawer from 'react-native-ui-lib/Drawer';
 
-import {Colors, Spacings, Typography, Assets, Text} from 'react-native-ui-lib';
+import {
+  Colors,
+  Spacings,
+  Typography,
+  Assets,
+  Text,
+  Incubator
+} from 'react-native-ui-lib';
 
 import Picker from './examples/Picker';
 import RadioGroup from './examples/RadioButtonGroup';
@@ -152,24 +159,36 @@ const itemsToRender: ItemToRender[] = [
   },
   {
     title: 'TextField',
-    FC: () => (
-      <TextField
-        text70
-        migrate
-        containerStyle={{marginBottom: 10}}
-        placeholder="type here..."
-        onChangeText={(text: string) => {
-          console.log(text);
-        }}
-      />)
+    FC: () => {
+      const [defaultValue, setDefaultValue] = useState('I am Default value');
+      const updateDefaultValue = () => {
+        setDefaultValue(`${defaultValue}1`);
+      };
+
+      return (
+        <>
+          <Button label="update default value" onPress={updateDefaultValue}/>
+          <Incubator.TextField
+            text70
+            migrate
+            defaultValue={defaultValue}
+            containerStyle={{marginBottom: 10}}
+            placeholder="type here..."
+            onChangeText={(text: string) => {
+              console.log(text);
+            }}
+          />
+        </>
+      );
+    }
   },
   {
     title: 'Switch',
     FC: () => {
       const [switchValue, setSwitchValue] = useState(true);
       return (
         <Switch
-          
+
           value={switchValue}
           onValueChange={setSwitchValue}
           style={{marginBottom: 20}}

webDemo/webpack.config.js

@@ -46,15 +46,15 @@ const imageLoaderConfiguration = {
       esModule: false
     }
   }
-}; 
+};
 
 const babelLoaderAppConfiguration = {
   test: /\.(js|jsx|ts|tsx)$/,
   include: baseProjectSource,
   use: useBabelForRN
 };
 
-module.exports = 
+module.exports =
 {
   entry: {
     app: path.resolve(appDirectory, './src/index.ts')
@@ -84,7 +84,7 @@ module.exports =
   devServer: {
     contentBase: path.resolve(appDirectory, './dist'),
     compress: true,
-    port: 9002
+    port: 9001
   },
   plugins: [
     new CleanWebpackPlugin({