[PUI] form enter key to submit (#8129)

* Potential fix for #7014. Might be wrong way to approach

* Cleanup null check on onKeyDown callback

* revert pre-commit change

---------

Co-authored-by: timmyhadwen <tim@micromelon.com.au>
Co-authored-by: Matthias Mair <code@mjmair.com>

src/frontend/src/components/forms/ApiForm.tsx

@@ -602,6 +602,15 @@ export function ApiForm({
                           control={form.control}
                           url={url}
                           setFields={setFields}
+                          onKeyDown={(value) => {
+                            if (
+                              value == 'Enter' &&
+                              !isLoading &&
+                              (!props.fetchInitialData || isDirty)
+                            ) {
+                              form.handleSubmit(submitForm, onFormError)();
+                            }
+                          }}
                         />
                       );
                     })}

src/frontend/src/components/forms/fields/ApiFormField.tsx

@@ -48,6 +48,7 @@ export type ApiFormAdjustFilterType = {
  * @param onValueChange : Callback function to call when the field value changes
  * @param adjustFilters : Callback function to adjust the filters for a related field before a query is made
  * @param adjustValue : Callback function to adjust the value of the field before it is sent to the API
+ * @param onKeyDown : Callback function to get which key was pressed in the form to handle submission on enter
  */
 export type ApiFormFieldType = {
   label?: string;
@@ -104,7 +105,8 @@ export function ApiFormField({
   control,
   hideLabels,
   url,
-  setFields
+  setFields,
+  onKeyDown
 }: Readonly<{
   fieldName: string;
   definition: ApiFormFieldType;
@@ -112,6 +114,7 @@ export function ApiFormField({
   hideLabels?: boolean;
   url?: string;
   setFields?: React.Dispatch<React.SetStateAction<ApiFormFieldSet>>;
+  onKeyDown?: (value: any) => void;
 }>) {
   const fieldId = useId();
   const controller = useController({
@@ -223,6 +226,9 @@ export function ApiFormField({
             controller={controller}
             fieldName={fieldName}
             onChange={onChange}
+            onKeyDown={(value) => {
+              onKeyDown?.(value);
+            }}
           />
         );
       case 'icon':
@@ -332,6 +338,7 @@ export function ApiFormField({
     fieldDefinition,
     numericalValue,
     onChange,
+    onKeyDown,
     reducedDefinition,
     ref,
     setFields,

src/frontend/src/components/forms/fields/TextField.tsx

@@ -13,12 +13,14 @@ export default function TextField({
   controller,
   fieldName,
   definition,
-  onChange
+  onChange,
+  onKeyDown
 }: Readonly<{
   controller: UseControllerReturn<FieldValues, any>;
   definition: any;
   fieldName: string;
   onChange: (value: any) => void;
+  onKeyDown: (value: any) => void;
 }>) {
   const fieldId = useId();
   const {
@@ -60,6 +62,7 @@ export default function TextField({
       onBlur={(event) => {
         onChange(event.currentTarget.value);
       }}
+      onKeyDown={(event) => onKeyDown(event.code)}
       rightSection={
         value && !definition.required ? (
           <IconX size="1rem" color="red" onClick={() => onTextChange('')} />