From 36c00803b0b55c4b2510a061c89c741c60944048 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Mon, 15 Apr 2024 14:42:34 +1000
Subject: [PATCH] Form focus (#7008)

* Add 'focus' property for ApiFormProps

* Attempt to focus on particular field

* Improve setFocus hook

- Set the focus at the appropriate time
- Auto focus on first field if not specified

* Add custom focus field

* Update useEffect property list
---
 src/frontend/src/components/forms/ApiForm.tsx | 60 +++++++++++++------
 .../components/forms/fields/ApiFormField.tsx  |  6 +-
 .../src/components/forms/fields/DateField.tsx |  1 +
 .../forms/fields/RelatedModelField.tsx        |  1 +
 .../src/tables/part/ParametricPartTable.tsx   |  2 +
 .../src/tables/part/PartParameterTable.tsx    |  5 +-
 6 files changed, 54 insertions(+), 21 deletions(-)

diff --git a/src/frontend/src/components/forms/ApiForm.tsx b/src/frontend/src/components/forms/ApiForm.tsx
index bb8d203d9e..4d02009d29 100644
--- a/src/frontend/src/components/forms/ApiForm.tsx
+++ b/src/frontend/src/components/forms/ApiForm.tsx
@@ -66,6 +66,7 @@ export interface ApiFormProps {
   pathParams?: PathParams;
   method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
   fields?: ApiFormFieldSet;
+  focus?: string;
   initialData?: FieldValues;
   submitText?: string;
   submitColor?: string;
@@ -292,7 +293,48 @@ export function ApiForm({
       });
       initialDataQuery.refetch();
     }
-  }, []);
+  }, [props.fetchInitialData]);
+
+  const isLoading = useMemo(
+    () =>
+      isFormLoading ||
+      initialDataQuery.isFetching ||
+      optionsLoading ||
+      isSubmitting ||
+      !props.fields,
+    [
+      isFormLoading,
+      initialDataQuery.isFetching,
+      isSubmitting,
+      props.fields,
+      optionsLoading
+    ]
+  );
+
+  const [initialFocus, setInitialFocus] = useState<string>('');
+
+  // Update field focus when the form is loaded
+  useEffect(() => {
+    let focusField = props.focus ?? '';
+
+    if (!focusField) {
+      // If a focus field is not specified, then focus on the first available field
+      Object.entries(props.fields ?? {}).forEach(([fieldName, field]) => {
+        if (focusField || field.read_only || field.disabled || field.hidden) {
+          return;
+        }
+
+        focusField = fieldName;
+      });
+    }
+
+    if (isLoading || initialFocus == focusField) {
+      return;
+    }
+
+    form.setFocus(focusField);
+    setInitialFocus(focusField);
+  }, [props.focus, props.fields, form.setFocus, isLoading, initialFocus]);
 
   const submitForm: SubmitHandler<FieldValues> = async (data) => {
     setNonFieldErrors([]);
@@ -392,22 +434,6 @@ export function ApiForm({
       });
   };
 
-  const isLoading = useMemo(
-    () =>
-      isFormLoading ||
-      initialDataQuery.isFetching ||
-      optionsLoading ||
-      isSubmitting ||
-      !props.fields,
-    [
-      isFormLoading,
-      initialDataQuery.isFetching,
-      isSubmitting,
-      props.fields,
-      optionsLoading
-    ]
-  );
-
   const onFormError = useCallback<SubmitErrorHandler<FieldValues>>(() => {
     props.onFormError?.();
   }, [props.onFormError]);
diff --git a/src/frontend/src/components/forms/fields/ApiFormField.tsx b/src/frontend/src/components/forms/fields/ApiFormField.tsx
index 3e3dff7c9c..237ca74fdf 100644
--- a/src/frontend/src/components/forms/fields/ApiFormField.tsx
+++ b/src/frontend/src/components/forms/fields/ApiFormField.tsx
@@ -188,7 +188,7 @@ export function ApiFormField({
         return (
           <TextInput
             {...reducedDefinition}
-            ref={ref}
+            ref={field.ref}
             id={fieldId}
             type={definition.field_type}
             value={value || ''}
@@ -226,7 +226,7 @@ export function ApiFormField({
           <NumberInput
             {...reducedDefinition}
             radius="sm"
-            ref={ref}
+            ref={field.ref}
             id={fieldId}
             value={numericalValue}
             error={error?.message}
@@ -256,7 +256,7 @@ export function ApiFormField({
           <FileInput
             {...reducedDefinition}
             id={fieldId}
-            ref={ref}
+            ref={field.ref}
             radius="sm"
             value={value}
             error={error?.message}
diff --git a/src/frontend/src/components/forms/fields/DateField.tsx b/src/frontend/src/components/forms/fields/DateField.tsx
index 923131c32d..2ccd1e1a3a 100644
--- a/src/frontend/src/components/forms/fields/DateField.tsx
+++ b/src/frontend/src/components/forms/fields/DateField.tsx
@@ -52,6 +52,7 @@ export default function DateField({
     <DateInput
       id={fieldId}
       radius="sm"
+      ref={field.ref}
       type={undefined}
       error={error?.message}
       value={dateValue}
diff --git a/src/frontend/src/components/forms/fields/RelatedModelField.tsx b/src/frontend/src/components/forms/fields/RelatedModelField.tsx
index 19591c2ab6..6613f1d48c 100644
--- a/src/frontend/src/components/forms/fields/RelatedModelField.tsx
+++ b/src/frontend/src/components/forms/fields/RelatedModelField.tsx
@@ -269,6 +269,7 @@ export function RelatedModelField({
       <Select
         id={fieldId}
         value={currentValue}
+        ref={field.ref}
         options={data}
         filterOption={null}
         onInputChange={(value: any) => {
diff --git a/src/frontend/src/tables/part/ParametricPartTable.tsx b/src/frontend/src/tables/part/ParametricPartTable.tsx
index 80a41bdcfe..ec53ab9ba7 100644
--- a/src/frontend/src/tables/part/ParametricPartTable.tsx
+++ b/src/frontend/src/tables/part/ParametricPartTable.tsx
@@ -132,6 +132,7 @@ export default function ParametricPartTable({
     url: ApiEndpoints.part_parameter_list,
     title: t`Add Part Parameter`,
     fields: partParameterFields,
+    focus: 'data',
     onFormSuccess: (parameter: any) => {
       updateParameterRecord(selectedPart, parameter);
     },
@@ -146,6 +147,7 @@ export default function ParametricPartTable({
     title: t`Edit Part Parameter`,
     pk: selectedParameter,
     fields: partParameterFields,
+    focus: 'data',
     onFormSuccess: (parameter: any) => {
       updateParameterRecord(selectedPart, parameter);
     }
diff --git a/src/frontend/src/tables/part/PartParameterTable.tsx b/src/frontend/src/tables/part/PartParameterTable.tsx
index 80e37fbb20..79f514686a 100644
--- a/src/frontend/src/tables/part/PartParameterTable.tsx
+++ b/src/frontend/src/tables/part/PartParameterTable.tsx
@@ -95,7 +95,9 @@ export function PartParameterTable({ partId }: { partId: any }) {
 
   const partParameterFields: ApiFormFieldSet = useMemo(() => {
     return {
-      part: {},
+      part: {
+        disabled: true
+      },
       template: {},
       data: {}
     };
@@ -105,6 +107,7 @@ export function PartParameterTable({ partId }: { partId: any }) {
     url: ApiEndpoints.part_parameter_list,
     title: t`New Part Parameter`,
     fields: partParameterFields,
+    focus: 'template',
     initialData: {
       part: partId
     },