JNG-5422 rework autofocus (#300)

BlackBeltTechnology · Jan 17, 2024 · 599e7e8 · 599e7e8
1 parent cdd9b51
commit 599e7e8
Show file tree

Hide file tree

Showing 13 changed files with 29 additions and 11 deletions.
diff --git a/judo-ui-react/src/main/java/hu/blackbelt/judo/ui/generator/react/UiWidgetHelper.java b/judo-ui-react/src/main/java/hu/blackbelt/judo/ui/generator/react/UiWidgetHelper.java
@@ -126,6 +126,9 @@ public static String justifyContent(Flex flex) {
     }
 
     public static Boolean shouldElementHaveAutoFocus(VisualElement element) {
+        if (!element.getPageContainer().isForm()) {
+            return false;
+        }
         Input input = findFirstInput(element.getPageContainer());
 
         return input != null && element.getFQName().equals(input.getFQName());

diff --git a/judo-ui-react/src/main/resources/actor/src/config/general.ts.hbs b/judo-ui-react/src/main/resources/actor/src/config/general.ts.hbs
@@ -36,3 +36,5 @@ export const fadeTimeout: number = 1200;
 export const slideTimeout: number = 300;
 
 export const dialogStackCloseDelay: number = 50;
+
+export const autoFocusRefDelay: number = 200;
diff --git a/judo-ui-react/src/main/resources/actor/src/containers/container.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/containers/container.tsx.hbs
@@ -101,6 +101,19 @@ export default function {{ containerComponentName container }}(props: {{ contain
     const { service: customContainerHook } = useTrackService<{{ containerComponentName container }}ContainerHook>(`(${OBJECTCLASS}=${ {{~ camelCaseNameToInterfaceKey (containerComponentName container) }}_CONTAINER_ACTIONS_HOOK_INTERFACE_KEY})`);
     const containerActions: {{ pageContainerActionDefinitionTypeName container }} = customContainerHook?.({{# unless container.table }}data, editMode, storeDiff{{/ unless }}) || {};
     const actions = useMemo(() => ({...containerActions, ...pageActions}), [containerActions, pageActions]);
+    {{# if container.form }}
+    const autoFocusInputRef = useRef<any>(null);
+
+    useEffect(() => {
+      const timeout = setTimeout(() => {
+        if (typeof autoFocusInputRef?.current?.focus === 'function') {
+          autoFocusInputRef.current.focus();
+        }
+      }, autoFocusRefDelay);
+
+      return () => clearTimeout(timeout);
+    }, []);
+    {{/ if }}
   {{/ unless }}
 
   return (

diff --git a/judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/dateinput.hbs b/judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/dateinput.hbs
@@ -13,7 +13,7 @@
     {{/ if }}
     <DatePicker
         {{# if (shouldElementHaveAutoFocus child) }}
-            autoFocus
+            inputRef={autoFocusInputRef}
         {{/ if }}
         slotProps={ {
             textField: {

diff --git a/judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/datetimeinput.hbs b/judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/datetimeinput.hbs
@@ -19,7 +19,7 @@
             'JUDO-required': {{ boolValue child.attributeType.isRequired }},
         }) }
         {{# if (shouldElementHaveAutoFocus child) }}
-            autoFocus
+            inputRef={autoFocusInputRef}
         {{/ if }}
         slotProps={ {
             textField: {

diff --git a/judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/enumerationcombo.hbs b/judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/enumerationcombo.hbs
@@ -16,7 +16,7 @@
         name="{{ child.attributeType.name }}"
         id="{{ getXMIID child }}"
         {{# if (shouldElementHaveAutoFocus child) }}
-            autoFocus
+            inputRef={autoFocusInputRef}
         {{/ if }}
         label={ t('{{ getTranslationKeyForVisualElement child }}', { defaultValue: '{{ child.label }}' }) as string }
         value={ data.{{ child.attributeType.name }} || '' }

diff --git a/judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/numericinput.hbs b/judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/numericinput.hbs
@@ -16,7 +16,7 @@
         name="{{ child.attributeType.name }}"
         id="{{ getXMIID child }}"
         {{# if (shouldElementHaveAutoFocus child) }}
-            autoFocus
+            inputRef={autoFocusInputRef}
         {{/ if }}
         label={ t('{{ getTranslationKeyForVisualElement child }}', { defaultValue: '{{ child.label }}' }) as string }
         customInput={TextField}

diff --git a/judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/textarea.hbs b/judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/textarea.hbs
@@ -16,7 +16,7 @@
         name="{{ child.attributeType.name }}"
         id="{{ getXMIID child }}"
         {{# if (shouldElementHaveAutoFocus child) }}
-            autoFocus
+            inputRef={autoFocusInputRef}
         {{/ if }}
         label={ t('{{ getTranslationKeyForVisualElement child }}', { defaultValue: '{{ child.label }}' }) as string }
         value={ data.{{ child.attributeType.name }} ?? '' }

diff --git a/judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/textinput.hbs b/judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/textinput.hbs
@@ -16,7 +16,7 @@
         name="{{ child.attributeType.name }}"
         id="{{ getXMIID child }}"
         {{# if (shouldElementHaveAutoFocus child) }}
-            autoFocus
+            inputRef={autoFocusInputRef}
         {{/ if }}
         label={ t('{{ getTranslationKeyForVisualElement child }}', { defaultValue: '{{ child.label }}' }) as string }
         value={ data.{{ child.attributeType.name }} ?? '' }

diff --git a/judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/timeinput.hbs b/judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/timeinput.hbs
@@ -13,7 +13,7 @@
     {{/ if }}
     <TimePicker
         {{# if (shouldElementHaveAutoFocus child) }}
-            autoFocus
+            inputRef={autoFocusInputRef}
         {{/ if }}
         ampm={false}
         ampmInClock={false}

diff --git a/judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/trinarylogiccombo.hbs b/judo-ui-react/src/main/resources/actor/src/containers/widget-fragments/trinarylogiccombo.hbs
@@ -14,9 +14,6 @@
     <TrinaryLogicCombobox
         name="{{ child.attributeType.name }}"
         id="{{ getXMIID child }}"
-        {{# if (shouldElementHaveAutoFocus child) }}
-            autoFocus={true}
-        {{/ if }}
         required={actions?.is{{ firstToUpper child.attributeType.name }}Required ? actions.is{{ firstToUpper child.attributeType.name }}Required(data, editMode) : ({{# if child.requiredBy }}data.{{ child.requiredBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isRequired  }})}
         label={ t('{{ getTranslationKeyForVisualElement child }}', { defaultValue: '{{ child.label }}' }) as string }
         value={ data?.{{ child.attributeType.name }} }

diff --git a/judo-ui-react/src/main/resources/actor/src/fragments/container/common-imports.fragment.hbs b/judo-ui-react/src/main/resources/actor/src/fragments/container/common-imports.fragment.hbs
@@ -1,5 +1,5 @@
 import type { Dispatch, SetStateAction, FC } from 'react';
-import { forwardRef, useEffect, useState, useCallback, useImperativeHandle, useMemo } from 'react';
+import { forwardRef, useEffect, useState, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LoadingButton } from '@mui/lab';
 import type { JudoIdentifiable } from '~/services/data-api/common';

diff --git a/judo-ui-react/src/main/resources/actor/src/fragments/container/view-imports.fragment.hbs b/judo-ui-react/src/main/resources/actor/src/fragments/container/view-imports.fragment.hbs
@@ -35,3 +35,6 @@ import {
   {{/ if }}
 } from '~/components/widgets';
 import { useConfirmationBeforeChange } from '~/hooks';
+{{# if container.form }}
+import { autoFocusRefDelay } from '~/config';
+{{/ if }}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -36,3 +36,5 @@ export const fadeTimeout: number = 1200;
		export const slideTimeout: number = 300;

		export const dialogStackCloseDelay: number = 50;

		export const autoFocusRefDelay: number = 200;