prevent early focus setting

DevExpress · Sep 4, 2024 · 1075c88 · 1075c88
1 parent 9b6375a
commit 1075c88
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/packages/devextreme-react/src/core/component-base.tsx b/packages/devextreme-react/src/core/component-base.tsx
@@ -76,7 +76,7 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
     const useDeferUpdateForTemplates = useRef(false);
     const guardsUpdateScheduled = useRef(false);
     const childElementsDetached = useRef(false);
-    const isFocused = useRef(false);
+    const shouldRestoreFocus = useRef(false);
     const optionsManager = useRef<OptionsManager>(new OptionsManager());
     const childNodes = useRef<Node[]>();
 
@@ -231,10 +231,6 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
 
       instance.current = new WidgetClass(el, options);
 
-      if (isFocused.current && instance.current.focus) {
-        instance.current.focus();
-      }
-
       if (!useRequestAnimationFrameFlag) {
         useDeferUpdateForTemplates.current = instance.current.option(
           'integrationOptions.useDeferUpdateForTemplates',
@@ -260,6 +256,13 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
       independentEvents,
       getConfig,
     ]);
+
+    const onTemplatesRendered = useCallback(() => {
+      if (shouldRestoreFocus.current && instance.current?.focus) {
+        instance.current.focus();
+        shouldRestoreFocus.current = false;
+      }
+    }, [shouldRestoreFocus.current, instance.current]);
 
     const onComponentUpdated = useCallback(() => {
       if (!optionsManager.current?.isInstanceSet) {
@@ -317,7 +320,7 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
       if (instance.current) {
         const dxRemoveArgs: DXRemoveCustomArgs = { isUnmounting: true };
 
-        isFocused.current = !!element.current?.contains(document.activeElement);
+        shouldRestoreFocus.current = !!element.current?.contains(document.activeElement);
         childNodes.current?.forEach((child) => child.parentNode?.removeChild(child));
         childElementsDetached.current = true;
 
@@ -330,6 +333,7 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
         }
 
         instance.current.dispose();
+        instance.current = null;
       }
       optionsManager.current.dispose();
 
@@ -341,7 +345,7 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
       element.current,
       optionsManager.current,
       childElementsDetached.current,
-      isFocused.current,
+      shouldRestoreFocus.current,
     ]);
 
     useLayoutEffect(() => {
@@ -418,6 +422,7 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
         renderContent(),
         React.createElement(TemplateManager, {
           init: setTemplateManagerHooks,
+          onTemplatesRendered,
         }),
       ),
       isPortalComponent && renderPortal(),

diff --git a/packages/devextreme-react/src/core/template-manager.tsx b/packages/devextreme-react/src/core/template-manager.tsx
@@ -36,7 +36,7 @@ function normalizeProps(props: ITemplateArgs): ITemplateArgs | ITemplateArgs['da
   return props;
 }
 
-export const TemplateManager: FC<TemplateManagerProps> = ({ init }) => {
+export const TemplateManager: FC<TemplateManagerProps> = ({ init, onTemplatesRendered }) => {
   const [instantiationModels, setInstantiationModels] = useState({
     collection: new TemplateInstantiationModels(),
   });
@@ -158,7 +158,8 @@ export const TemplateManager: FC<TemplateManagerProps> = ({ init }) => {
     if (updateContext) {
       updateContext.onUpdated();
     }
-  }, [updateContext]);
+    onTemplatesRendered();
+  }, [updateContext, onTemplatesRendered]);
 
   if (instantiationModels.collection.empty) {
     return null;

diff --git a/packages/devextreme-react/src/core/types.ts b/packages/devextreme-react/src/core/types.ts
@@ -54,6 +54,7 @@ export type DXTemplateCreator = (templateOptions: Record<string, ITemplate>) =>
 
 export interface TemplateManagerProps {
   init: (args: InitArgument) => void;
+  onTemplatesRendered: () => void;
 }
 
 export interface TemplateInstantiationModel {