fix: selectbox keyboard navigation is broken in React Strict Mode (T1230720)

packages/devextreme-react/build.config.js

@@ -1,7 +1,7 @@
 
 module.exports = {
   src: './src/**/*.{ts,tsx}',
-  testSrc: './src/**/__tests__/*.*',
+  testSrc: './src/**/__tests__/**/*.*',
   npm: {
     dist: './npm/',
     package: 'package.json',

packages/devextreme-react/src/core/__tests__/component.test.tsx

@@ -394,4 +394,30 @@ describe('disposing', () => {
 
     expect(Widget.option.mock.calls.length).toBe(0);
   });
+
+  it('saves and restores focus state after dispose', async () => {
+    let firstRender = true;
+
+    WidgetClass.mockImplementation((container: HTMLElement) => {
+      const input = document.createElement('input');
+
+      container.appendChild(input);
+
+      if (firstRender) {
+        input.focus();
+      }
+
+      firstRender = false;
+
+      return Widget;
+    })
+
+    testingLib.render(
+      <React.StrictMode>
+        <TestComponent />
+      </React.StrictMode>
+    );
+
+    expect(Widget.focus).toHaveBeenCalledTimes(1);
+  });
 });

packages/devextreme-react/src/core/__tests__/template-manager.test.tsx

@@ -93,7 +93,7 @@ describe('Template Manager', () => {
         <div className='children-template-container'></div>
         <div className='render-template-container'></div>
         <div className='component-template-container'></div>
-        <TemplateManager init={init} />
+        <TemplateManager init={init} onTemplatesRendered={() => undefined} />
       </React.Fragment>
     );
 
@@ -120,7 +120,7 @@ describe('Template Manager', () => {
         <div className='children-template-container'></div>
         <div className='render-template-container'></div>
         <div className='component-template-container'></div>
-        <TemplateManager init={init} />
+        <TemplateManager init={init} onTemplatesRendered={() => undefined} />
       </React.Fragment>
     );
 
@@ -175,7 +175,7 @@ describe('Template Manager', () => {
     render(
       <React.Fragment>
         <div className='render-template-container'></div>
-        <TemplateManager init={init} />
+        <TemplateManager init={init} onTemplatesRendered={() => undefined} />
       </React.Fragment>
     );
 
@@ -216,7 +216,7 @@ describe('Template Manager', () => {
       <React.Fragment>
         <div className='render-template-container'></div>
         <div className='component-template-container'></div>
-        <TemplateManager init={init} />
+        <TemplateManager init={init} onTemplatesRendered={() => undefined}/>
       </React.Fragment>
     );
 
@@ -269,7 +269,7 @@ describe('Template Manager', () => {
       <React.Fragment>
         <div className='render-template-container'></div>
         <div className='component-template-container'></div>
-        <TemplateManager init={init} />
+        <TemplateManager init={init} onTemplatesRendered={() => undefined} />
       </React.Fragment>
     );
 
@@ -318,7 +318,7 @@ describe('Template Manager', () => {
       <React.Fragment>
         <div className='render-template-container'></div>
         <div className='component-template-container'></div>
-        <TemplateManager init={init} />
+        <TemplateManager init={init} onTemplatesRendered={() => undefined} />
       </React.Fragment>
     );
 
@@ -371,7 +371,7 @@ describe('Template Manager', () => {
     render(
       <React.Fragment>
         <div className='render-template-container'></div>
-        <TemplateManager init={init} />
+        <TemplateManager init={init} onTemplatesRendered={() => undefined} />
       </React.Fragment>
     );
 
@@ -422,7 +422,7 @@ describe('Template Manager', () => {
     render(
       <React.Fragment>
         <div className='render-template-container'></div>
-        <TemplateManager init={init} />
+        <TemplateManager init={init} onTemplatesRendered={() => undefined} />
       </React.Fragment>
     );
 
@@ -475,7 +475,7 @@ describe('Template Manager', () => {
       <React.Fragment>
         <div className='render-template-container'></div>
         <div className='other-container'></div>
-        <TemplateManager init={init} />
+        <TemplateManager init={init} onTemplatesRendered={() => undefined} />
       </React.Fragment>
     );
 
@@ -555,7 +555,7 @@ describe('Template Manager', () => {
     const { rerender } = render(
       <React.Fragment>
         <div className='render-template-container'></div>
-        <TemplateManager init={init} />
+        <TemplateManager init={init} onTemplatesRendered={() => undefined} />
       </React.Fragment>
     );
 
@@ -575,7 +575,7 @@ describe('Template Manager', () => {
     rerender(
       <React.Fragment>
         <div className='render-template-container'></div>
-        <TemplateManager init={init} />
+        <TemplateManager init={init} onTemplatesRendered={() => undefined} />
       </React.Fragment>
     );
 
@@ -594,7 +594,7 @@ describe('Template Manager', () => {
     rerender(
       <React.Fragment>
         <div className='render-template-container'></div>
-        <TemplateManager init={init} />
+        <TemplateManager init={init} onTemplatesRendered={() => undefined} />
       </React.Fragment>
     );
 

packages/devextreme-react/src/core/__tests__/test-component.tsx

@@ -34,6 +34,7 @@ const Widget = {
   clearExtensions: jest.fn(),
   dispose: jest.fn(),
   skipOptionsRollBack: false,
+  focus: jest.fn(),
 };
 
 const WidgetClass = jest.fn<typeof Widget, any>(() => Widget);

packages/devextreme-react/src/core/component-base.tsx

@@ -76,6 +76,7 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
     const useDeferUpdateForTemplates = useRef(false);
     const guardsUpdateScheduled = useRef(false);
     const childElementsDetached = useRef(false);
+    const shouldRestoreFocus = useRef(false);
     const optionsManager = useRef<OptionsManager>(new OptionsManager());
     const childNodes = useRef<Node[]>();
 
@@ -256,6 +257,13 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
       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) {
         return;
@@ -312,14 +320,20 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
       if (instance.current) {
         const dxRemoveArgs: DXRemoveCustomArgs = { isUnmounting: true };
 
+        shouldRestoreFocus.current = !!element.current?.contains(document.activeElement);
         childNodes.current?.forEach((child) => child.parentNode?.removeChild(child));
         childElementsDetached.current = true;
 
         if (element.current) {
+          const preventFocusOut = (e: FocusEvent) => e.stopPropagation();
+
+          events.on(element.current, 'focusout', preventFocusOut);
           events.triggerHandler(element.current, DX_REMOVE_EVENT, dxRemoveArgs);
+          events.off(element.current, 'focusout', preventFocusOut);
         }
 
         instance.current.dispose();
+        instance.current = null;
       }
       optionsManager.current.dispose();
 
@@ -331,6 +345,7 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
       element.current,
       optionsManager.current,
       childElementsDetached.current,
+      shouldRestoreFocus.current,
     ]);
 
     useLayoutEffect(() => {
@@ -407,6 +422,7 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
         renderContent(),
         React.createElement(TemplateManager, {
           init: setTemplateManagerHooks,
+          onTemplatesRendered,
         }),
       ),
       isPortalComponent && renderPortal(),

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;

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 {