fix(Form): internal logic fixes * 2

Author: tenphi

src/components/fields/RadioGroup/Radio.tsx

@@ -162,6 +162,8 @@ export interface CubeRadioProps
   inputStyles?: Styles;
   /* The visual type of the radio button */
   type?: 'button' | 'radio';
+  value?: string;
+  onChange?: (value: string) => void;
 }
 
 function Radio(props: CubeRadioProps, ref) {

src/components/form/Form/ComplexForm.stories.tsx

@@ -259,8 +259,11 @@ const Template: StoryFn<typeof Form> = (args) => {
         <Field label="Custom field" tooltip="What?">
           <Block>Test</Block>
         </Field>
-        <Field
+        <TextInput
           name="email"
+          label="Email field"
+          type="email"
+          size="small"
           rules={[
             { required: true, message: 'This field is required' },
             {
@@ -269,13 +272,8 @@ const Template: StoryFn<typeof Form> = (args) => {
             },
           ]}
           necessityIndicator={'label'}
-          defaultValue="[email protected]"
-          shouldUpdate={({ email }) => {
-            return !!email;
-          }}
-        >
-          <TextInput type="email" size="small" label="Email field" />
-        </Field>
+          shouldUpdate={(prevValues, { email }) => !!email}
+        />
         <Field name="password">
           <PasswordInput label="Password field" />
         </Field>

src/components/form/Form/field.test.tsx

@@ -9,10 +9,10 @@ import { Field } from './Field';
 jest.mock('../../../_internal/hooks/use-warn');
 
 describe('Legacy <Field />', () => {
-  it('should set default value as value', () => {
+  it.skip('should set default value as value', () => {
     const { getByRole, formInstance } = renderWithForm(
       <Field name="test" defaultValue="Hello, World!">
-        <TextInput label="test" />
+        <TextInput name="test" label="test" />
       </Field>,
     );
 
@@ -22,7 +22,7 @@ describe('Legacy <Field />', () => {
     expect(formInstance.getFieldValue('test')).toBe('Hello, World!');
   });
 
-  it('should update default value', () => {
+  it.skip('should update default value', () => {
     const { rerender, formInstance } = renderWithForm(
       <Field name="test" defaultValue="Hello, World!">
         <TextInput label="test" />
@@ -40,7 +40,7 @@ describe('Legacy <Field />', () => {
     expect(formInstance.getFieldValue('test')).toBe('World!');
   });
 
-  it('should not update default value if field is touched', async () => {
+  it.skip('should not update default value if field is touched', async () => {
     const { rerender, formInstance, getByRole } = renderWithForm(
       <Field name="test" defaultValue="Hello, World!">
         <TextInput label="test" />
@@ -51,10 +51,8 @@ describe('Legacy <Field />', () => {
 
     const input = getByRole('textbox');
 
-    await act(async () => {
-      await userEvent.clear(input);
-      await userEvent.type(input, 'Test!');
-    });
+    await userEvent.clear(input);
+    await userEvent.type(input, 'Test!');
 
     rerender(
       <Field name="test" defaultValue="World!">
@@ -74,10 +72,8 @@ describe('Legacy <Field />', () => {
 
     const input = getByRole('textbox');
 
-    await act(async () => {
-      await userEvent.clear(input);
-      await userEvent.type(input, 'Hello!');
-    });
+    await userEvent.clear(input);
+    await userEvent.type(input, 'Hello!');
 
     rerender(
       <Field name="test" defaultValue="World!">
@@ -90,16 +86,21 @@ describe('Legacy <Field />', () => {
 
   it('should change value', async () => {
     const { getByRole, formInstance } = renderWithForm(
-      <Field name="test" defaultValue="Hello">
+      <Field name="test">
         <TextInput label="test" />
       </Field>,
+      {
+        formProps: {
+          defaultValues: {
+            test: 'Hello',
+          },
+        },
+      },
     );
 
     const input = getByRole('textbox');
 
-    await act(async () => {
-      await userEvent.type(input, ', World!');
-    });
+    await userEvent.type(input, ', World!');
 
     expect(input).toHaveValue('Hello, World!');
     expect(formInstance.getFieldValue('test')).toBe('Hello, World!');
@@ -147,9 +148,7 @@ describe('Legacy <Field />', () => {
 
     expect(cliRadio).toBeChecked();
 
-    await act(async () => {
-      await userEvent.click(gitRadio);
-    });
+    await userEvent.click(gitRadio);
 
     expect(gitRadio).toBeChecked();
   });
@@ -159,27 +158,26 @@ describe('Legacy <Field />', () => {
       const [deployMode] = useState('git');
 
       return (
-        <Radio.Group
-          defaultValue="cli"
-          label="Deploy mode"
-          name="test"
-          value={deployMode}
-        >
+        <Radio.Group label="Deploy mode" name="test" value={deployMode}>
           <Radio value="cli">Deploy with CLI</Radio>
           <Radio value="git">Deploy with GIT</Radio>
         </Radio.Group>
       );
     }
-    const { getByRole, formInstance } = renderWithForm(<Content />);
+    const { getByRole, formInstance } = renderWithForm(<Content />, {
+      formProps: {
+        defaultValues: {
+          test: 'cli',
+        },
+      },
+    });
 
     const cliRadio = getByRole('radio', { name: 'Deploy with CLI' });
     const gitRadio = getByRole('radio', { name: 'Deploy with GIT' });
 
     expect(cliRadio).toBeChecked();
 
-    await act(async () => {
-      await userEvent.click(gitRadio);
-    });
+    await userEvent.click(gitRadio);
 
     expect(formInstance.getFieldValue('test')).toBe('git');
     expect(gitRadio).toBeChecked();
@@ -197,7 +195,7 @@ describe('Legacy <Field />', () => {
 
     const cliRadio = getByRole('radio', { name: 'Deploy with CLI' });
 
-    await act(async () => await userEvent.click(cliRadio));
+    await userEvent.click(cliRadio);
 
     expect(formInstance.getFieldValue('test')).toBe('cli');
     expect(onChange).toHaveBeenCalled();

src/components/form/Form/use-field/use-field.ts

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 
 import { ValidateTrigger } from '../../../../shared/index';
-import { useEvent } from '../../../../_internal/index';
+import { useEvent, useWarn } from '../../../../_internal/index';
 import { useFormProps } from '../Form';
 import { FieldTypes } from '../types';
 import { delayValidationRule } from '../validation';
@@ -36,6 +36,12 @@ function removeId(name, id) {
   ID_MAP[name] = ID_MAP[name].filter((_id) => _id !== id);
 }
 
+const UNCONTROLLED_FIELDS = [
+  'defaultValue',
+  'defaultSelectedKey',
+  'defaultSelected',
+];
+
 export type UseFieldParams = {
   defaultValidationTrigger?: ValidateTrigger;
 };
@@ -66,6 +72,17 @@ export function useField<T extends FieldTypes, Props extends CubeFieldProps<T>>(
     id || (idPrefix ? `${idPrefix}_${fieldName}` : fieldName),
   );
 
+  const uncontrolledKey = Object.keys(props).find((key) =>
+    UNCONTROLLED_FIELDS.includes(key),
+  );
+
+  useWarn(uncontrolledKey && fieldName, {
+    key: uncontrolledKey,
+    args: [
+      "It's not allowed to use field in uncontrolled mode if it's connected to the form. Use 'defaultValues' prop on Form component to set the default value for each field. You can also disconnect the input from the form by removing 'name' property.",
+    ],
+  });
+
   useEffect(() => {
     let newId;
 
@@ -88,15 +105,16 @@ export function useField<T extends FieldTypes, Props extends CubeFieldProps<T>>(
 
   let field = form?.getFieldInstance(fieldName);
 
-  if (form) {
-    if (!field) {
-      field = form.createField(fieldName, true);
-    }
+  // if there is no field
+  if (form && !field && fieldName) {
+    field = form.createField(fieldName, true);
   }
 
-  if (field && field.rules !== rules) {
-    field.rules = rules;
+  if (field) {
+    // copy rules to the field rules
+    field.rules = [...(rules ?? [])];
 
+    // if there are some rules and a delay then add a rule that delays the validation
     if (field.rules && field.rules.length && validationDelay) {
       field.rules.unshift(delayValidationRule(validationDelay));
     }