x-ui-design 0.3.76 → 0.3.78

package/lib/components/Form/Form.tsx

@@ -36,16 +36,15 @@ const Form: FC<FormProps> & { Item: FC<FormItemProps> } = ({
   scrollToFirstError = false,
   ...rest
 }) => {
-  const internalForm = useForm(initialValues, onFieldsChange, onValuesChange, scrollToFirstError);
+  const internalForm = useForm(initialValues, onFieldsChange, onValuesChange);
   const formInstance = form || internalForm;
-
-  formInstance.setScrollToFirstError(scrollToFirstError);
-
   const formRef = useRef<HTMLFormElement>(null);
 
   const handleSubmit = async (e: SyntheticEvent) => {
     e.preventDefault();
 
+    formInstance.setScrollToFirstError(scrollToFirstError);
+
     if (await formInstance.validateFields()) {
       onFinish?.(formInstance.getFieldsValue());
     } else if (onFinishFailed) {
@@ -66,7 +65,7 @@ const Form: FC<FormProps> & { Item: FC<FormItemProps> } = ({
     }
   }, [formInstance, onFieldsChange, onValuesChange]);
 
-  const injectPropsIntoFinalLeaf = (child: ReactNode): ReactNode => {
+  const injectPropsIntoFinalLeaf = (child: ReactNode, key: number): ReactNode => {
     if (!isValidElement(child)) {
       return child;
     }
@@ -85,7 +84,7 @@ const Form: FC<FormProps> & { Item: FC<FormItemProps> } = ({
 
     if (isWrapper) {
       return (
-        <child.type {...childProps}>
+        <child.type {...childProps} data-item={key == 0 ? 'first-content' : ''}>
           {Children.map(flattenChildren(childProps.children), injectPropsIntoFinalLeaf)}
         </child.type>
       )
@@ -113,7 +112,7 @@ const Form: FC<FormProps> & { Item: FC<FormItemProps> } = ({
         onSubmit={handleSubmit}
         className={`${prefixCls} ${className}`}
       >
-        {Children.map(childrenList, child => injectPropsIntoFinalLeaf(child))}
+        {Children.map(childrenList, (child, key) => injectPropsIntoFinalLeaf(child, key))}
       </form>
     </FormContext.Provider>
   );

package/lib/hooks/useForm.ts

@@ -28,6 +28,7 @@ const useForm = (
   const formRef = useRef<Record<string, RuleTypes>>({ ...initialValues });
   const fieldInstancesRef = useRef<Record<string, FieldInstancesRef>>({});
 
+  const [isSubmit, setIsSubmit] = useState(false);
   const [isReseting, setIsReseting] = useState(false);
   const [errors, setErrors] = useState<Record<string, string[]>>({});
 
@@ -222,11 +223,20 @@ const useForm = (
     setErrors(prev => ({ ...prev, [name]: fieldErrors }));
     warningsRef.current[name] = fieldWarnings;
 
-    if (_scrollToFirstError.current) {
+    console.log({
+      isSubmit,
+      _scrollToFirstError: _scrollToFirstError.current
+    });
+    
+    
+    if (isSubmit || _scrollToFirstError.current) {
       const firstErrorContent = document.querySelectorAll('.xUi-form-item-error')?.[0];
-
+  
       if (firstErrorContent) {
-        firstErrorContent.closest('.xUi-form-item')?.scrollIntoView();
+        firstErrorContent.closest('.xUi-form-item')?.closest('[data-item="first-content"]')?.scrollIntoView();
+
+        setIsSubmit(false);
+        setScrollToFirstError(false);
       }
     }
 
@@ -267,6 +277,8 @@ const useForm = (
   }
 
   async function submit() {
+    setIsSubmit(true);
+
     return (await validateFields()) ? formRef.current : undefined;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-ui-design",
-  "version": "0.3.76",
+  "version": "0.3.78",
   "license": "ISC",
   "author": "Gabriel Boyajyan",
   "main": "dist/index.js",

package/src/app/page.tsx

@@ -1878,10 +1878,130 @@ export default function Home() {
                 <div style={{ width: 500 }}></div>
 
                 <Form form={form} onFinish={handle} size="large" scrollToFirstError={true}>
+                    <div>
+                        <div style={{ height: 200 }}></div>
+
+                        <Item rules={[{ required: true }]} name="gender" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+                    </div>
+
                     <Item rules={[{ required: true }]} name="gender" label="Gender">
                         <Select options={CountryCodes} />
                     </Item>
 
+                    <Item rules={[{ required: true }]} name="gender1" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender2" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender3" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender4" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender5" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender6" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender7" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender8" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender9" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender10" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender11" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender12" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender13" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender14" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender15" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender16" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender17" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender18" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender19" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender20" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender21" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender22" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item name="gender23" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender24" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender24" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender26" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender27" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
+                    <Item rules={[{ required: true }]} name="gender30" label="Gender">
+                        <Select options={CountryCodes} />
+                    </Item>
+
                     <Item rules={[{ required: true }]} name="country" label="country">
                         <Select options={CountryCodes} />
                     </Item>