fix(Form): internal logic fixes

Author: tenphi

.changeset/wild-parents-suffer.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Form logic internal fixes.

src/components/content/Tag/Tag.tsx

@@ -34,7 +34,7 @@ const TagElement = tasty({
       closable: '0 (2.5x - 1bw) 0 (1x - 1bw)',
     },
     fill: {
-      '': '#dark.04',
+      '': '#light',
       ...Object.keys(THEMES).reduce((map, type) => {
         map[`[data-type="${type}"]`] = THEMES[type].fill;
 

src/components/fields/ComboBox/ComboBox.stories.tsx

@@ -4,6 +4,7 @@ import { userEvent, within } from '@storybook/test';
 
 import { SELECTED_KEY_ARG } from '../../../stories/FormFieldArgs';
 import { baseProps } from '../../../stories/lists/baseProps';
+import { Form, useForm } from '../../form/index';
 
 import { ComboBox, CubeComboBoxProps } from './ComboBox';
 
@@ -32,6 +33,26 @@ const Template: StoryFn<CubeComboBoxProps<any>> = (
   </>
 );
 
+const FormTemplate: StoryFn<CubeComboBoxProps<any>> = (
+  args: CubeComboBoxProps<any>,
+) => {
+  const [form] = useForm();
+
+  return (
+    <Form form={form}>
+      <ComboBox name="combobox" {...args}>
+        <ComboBox.Item key="red">Red</ComboBox.Item>
+        <ComboBox.Item key="orange">Orange</ComboBox.Item>
+        <ComboBox.Item key="yellow">Yellow</ComboBox.Item>
+        <ComboBox.Item key="green">Green</ComboBox.Item>
+        <ComboBox.Item key="blue">Blue</ComboBox.Item>
+        <ComboBox.Item key="purple">Purple</ComboBox.Item>
+        <ComboBox.Item key="violet">Violet</ComboBox.Item>
+      </ComboBox>
+    </Form>
+  );
+};
+
 export const Default = Template.bind({});
 Default.args = {};
 
@@ -101,3 +122,5 @@ With1LongOptionFiltered.play = async ({ canvasElement }) => {
 
   await userEvent.type(combobox, 'Red');
 };
+
+export const WithinForm = FormTemplate.bind({});

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, useIsFirstRender } from '../../../../_internal/index';
+import { useEvent } from '../../../../_internal/index';
 import { useFormProps } from '../Form';
 import { FieldTypes } from '../types';
 import { delayValidationRule } from '../validation';
@@ -47,7 +47,6 @@ export function useField<T extends FieldTypes, Props extends CubeFieldProps<T>>(
   props = useFormProps(props);
 
   let {
-    defaultValue,
     id,
     idPrefix,
     name,
@@ -60,15 +59,9 @@ export function useField<T extends FieldTypes, Props extends CubeFieldProps<T>>(
     showValid,
     shouldUpdate,
   } = props;
-
-  if (rules && rules.length && validationDelay) {
-    rules.unshift(delayValidationRule(validationDelay));
-  }
-
   const nonInput = !name;
   const fieldName: string = name != null ? name : '';
 
-  const isFirstRender = useIsFirstRender();
   let [fieldId, setFieldId] = useState(
     id || (idPrefix ? `${idPrefix}_${fieldName}` : fieldName),
   );
@@ -95,41 +88,22 @@ export function useField<T extends FieldTypes, Props extends CubeFieldProps<T>>(
 
   let field = form?.getFieldInstance(fieldName);
 
-  if (field) {
-    field.rules = rules;
-  }
-
-  let isRequired = rules && !!rules.find((rule) => rule.required);
-
-  useEffect(() => {
-    if (!form) return;
-
-    if (field) {
-      form.forceReRender();
-    } else {
-      form.createField(fieldName);
-    }
-  }, [field]);
-
   if (form) {
-    if (isFirstRender) {
-      if (!field) {
-        field = form.createField(fieldName, true);
-      }
-
-      if (field?.value == null && defaultValue != null) {
-        form.setFieldValue(fieldName, defaultValue, false, true);
-        form.updateInitialFieldsValue({ [fieldName]: defaultValue });
-
-        field = form?.getFieldInstance(fieldName);
-      }
+    if (!field) {
+      field = form.createField(fieldName, true);
     }
+  }
+
+  if (field && field.rules !== rules) {
+    field.rules = rules;
 
-    if (!field?.touched && defaultValue != null) {
-      form.setFieldValue(fieldName, defaultValue, false, true);
+    if (field.rules && field.rules.length && validationDelay) {
+      field.rules.unshift(delayValidationRule(validationDelay));
     }
   }
 
+  let isRequired = rules && !!rules.find((rule) => rule.required);
+
   const onChangeHandler = useEvent((val: any, dontTouch: boolean) => {
     if (!form) return;
 

src/tokens.ts

@@ -48,6 +48,7 @@ const TOKENS = {
   transition: '80ms',
   'clear-color': 'transparent',
   'border-color': color('dark', 0.1),
+  'border-opaque-color': 'rgb(227, 227, 233)',
   'shadow-color': color('dark-03', 0.1),
   'draft-color': color('dark', 0.2),
   'minor-color': color('dark', 0.65),