admin ui: fix "enter" on create new modal (inside fields)

app/src/ui/modules/data/components/schema/create-modal/step.entity.fields.tsx

@@ -1,6 +1,7 @@
 import { typeboxResolver } from "@hookform/resolvers/typebox";
+import type { Static } from "core/utils";
 import { type TAppDataEntityFields, entitiesSchema } from "data/data-schema";
-import { useRef, useState } from "react";
+import { useRef } from "react";
 import { useForm } from "react-hook-form";
 import { MantineSelect } from "ui/components/form/hook-form-mantine/MantineSelect";
 import { useEvent } from "ui/hooks/use-event";
@@ -11,31 +12,33 @@ import {
 import { ModalBody, ModalFooter, type TCreateModalSchema, useStepContext } from "./CreateModal";
 
 const schema = entitiesSchema;
+type Schema = Static<typeof schema>;
 
 export function StepEntityFields() {
    const { nextStep, stepBack, state, setState } = useStepContext<TCreateModalSchema>();
    const entity = state.entities?.create?.[0]!;
    const defaultFields = { id: { type: "primary", name: "id" } } as const;
    const ref = useRef<EntityFieldsFormRef>(null);
+   const initial = entity
+      ? entity
+      : {
+           fields: defaultFields,
+           config: {
+              sort_field: "id",
+              sort_dir: "asc"
+           }
+        };
    const {
       control,
       formState: { isValid, errors },
       getValues,
       handleSubmit,
       watch,
-      register,
       setValue
    } = useForm({
       mode: "onTouched",
       resolver: typeboxResolver(schema),
-      defaultValues: {
+      defaultValues: initial as NonNullable<Schema>
-         ...entity,
-         fields: defaultFields,
-         config: {
-            sort_field: "id",
-            sort_dir: "asc"
-         }
-      }
    });
 
    const values = watch();
@@ -74,7 +77,11 @@ export function StepEntityFields() {
                      Add fields to <strong>{entity.name}</strong>:
                   </p>
                   <div className="flex flex-col gap-1">
-                     <EntityFieldsForm ref={ref} fields={defaultFields} onChange={updateListener} />
+                     <EntityFieldsForm
+                        ref={ref}
+                        fields={initial.fields as any}
+                        onChange={updateListener}
+                     />
                   </div>
                </div>
                <div className="flex flex-col gap-3">
@@ -82,7 +89,7 @@ export function StepEntityFields() {
                   <div className="flex flex-row gap-2">
                      <MantineSelect
                         label="Field"
-                        data={Object.keys(values.fields).filter((name) => name.length > 0)}
+                        data={Object.keys(values.fields ?? {}).filter((name) => name.length > 0)}
                         placeholder="Select field"
                         name="config.sort_field"
                         allowDeselect={false}
@@ -102,7 +109,7 @@ export function StepEntityFields() {
                <div>
                   {Object.entries(errors).map(([key, value]) => (
                      <p key={key}>
-                        {key}: {value.message}
+                        {key}: {(value as any).message}
                      </p>
                   ))}
                </div>

app/src/ui/routes/data/forms/entity.fields.form.tsx

@@ -72,22 +72,16 @@ export const EntityFieldsForm = forwardRef<
       name,
       field
    }));
-   /*const entityFields = entity.fields.map((field) => ({
-         name: field.name,
-         field: field.toJSON()
-      }));*/
 
    const {
       control,
       formState: { isValid, errors },
       getValues,
-      handleSubmit,
       watch,
       register,
       setValue,
       setError,
-      reset,
+      reset
-      clearErrors
    } = useForm({
       mode: "all",
       resolver: typeboxResolver(schema),
@@ -114,7 +108,6 @@ export const EntityFieldsForm = forwardRef<
             props?.onChange?.(toCleanValues(data));
          });
       }
-      //props?.onChange?.()
    }, []);
 
    useImperativeHandle(ref, () => ({
@@ -122,25 +115,9 @@ export const EntityFieldsForm = forwardRef<
       getValues: () => getValues(),
       getData: () => {
          return toCleanValues(getValues());
-         /*return Object.fromEntries(
-            getValues().fields.map((field) => [field.name, objectCleanEmpty(field.field)])
-         );*/
       },
       isValid: () => isValid
    }));
-   console.log("errors", errors.fields);
-
-   /*useEffect(() => {
-      console.log("change", values);
-      onSubmit(values);
-   }, [values]);*/
-
-   function onSubmit(data: TFieldsFormSchema) {
-      console.log("submit", isValid, data, errors);
-   }
-   function onSubmitInvalid(a, b) {
-      console.log("submit invalid", a, b);
-   }
 
    function handleAppend(_type: keyof typeof fieldsSchemaObject) {
       const newField = {
@@ -151,7 +128,6 @@ export const EntityFieldsForm = forwardRef<
             config: {}
          }
       };
-      console.log("handleAppend", _type, newField);
       append(newField);
    }
 
@@ -165,10 +141,7 @@ export const EntityFieldsForm = forwardRef<
    };
    return (
       <>
-         <form
+         <div className="flex flex-col gap-6">
-            onSubmit={handleSubmit(onSubmit as any, onSubmitInvalid)}
-            className="flex flex-col gap-6"
-         >
             <div className="flex flex-col gap-3">
                <div className="flex flex-col gap-4">
                   {sortable ? (
@@ -220,9 +193,7 @@ export const EntityFieldsForm = forwardRef<
                   </Popover>
                </div>
             </div>
-            <button type="submit" className="hidden" />
+         </div>
-            {/*<Debug watch={watch} errors={errors} />*/}
-         </form>
       </>
    );
 });