prevent early guard firing (#875)

DevExpress · Jan 12, 2024 · ddbdec4 · ddbdec4
1 parent 0a9ffe1
commit ddbdec4
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/packages/devextreme-react/src/core/__tests__/props-updating.test.tsx b/packages/devextreme-react/src/core/__tests__/props-updating.test.tsx
@@ -298,6 +298,22 @@ describe('option control', () => {
     });
   });
 
+  it('rolls back controlled options on second timer (to account for async React 18+ updates)', () => {
+    render(
+      <ControlledComponent everyOption={123} />,
+    );
+
+    fireOptionChange('everyOption', 234);
+    jest.runOnlyPendingTimers();
+
+    expect(Widget.option.mock.calls.length).toBe(0);
+
+    jest.runAllTimers();
+
+    expect(Widget.option.mock.calls.length).toBe(1);
+    expect(Widget.option.mock.calls[0]).toEqual(['everyOption', 123]);
+  });
+
   it('rolls back controlled complex option', () => {
     render(
       <ControlledComponent complexOption={{ a: 123, b: 234 }} />,
@@ -412,6 +428,25 @@ describe('option control', () => {
     expect(Widget.option.mock.calls[0]).toEqual(['everyOption', 234]);
   });
 
+  it('applies option change with async React 18+ update', () => {
+    const { rerender } = render(
+      <ControlledComponent everyOption={123} />,
+    );
+
+    fireOptionChange('everyOption', 234);
+
+    jest.runOnlyPendingTimers();
+    expect(Widget.option.mock.calls.length).toBe(0);
+
+    rerender(
+      <ControlledComponent everyOption={234} />,
+    );
+
+    jest.runAllTimers();
+    expect(Widget.option.mock.calls.length).toBe(1);
+    expect(Widget.option.mock.calls[0]).toEqual(['everyOption', 234]);
+  });
+
   it('applies complex option change', () => {
     const { rerender } = render(
       <ControlledComponent complexOption={{ a: 123 }} />,

diff --git a/packages/devextreme-react/src/core/options-manager.ts b/packages/devextreme-react/src/core/options-manager.ts
@@ -9,14 +9,18 @@ import type { IConfigNode } from './configuration/config-node';
 
 const optionsManagers = new Set<OptionsManager>();
 let guardTimeoutHandler = -1;
+let innerGuardTimeoutHandler = -1;
 
 export function unscheduleGuards(): void {
   clearTimeout(guardTimeoutHandler);
+  clearTimeout(innerGuardTimeoutHandler);
 }
 export function scheduleGuards(): void {
   unscheduleGuards();
   guardTimeoutHandler = window.setTimeout(() => {
-    optionsManagers.forEach((optionManager) => optionManager.execGuards());
+    innerGuardTimeoutHandler = window.setTimeout(() => {
+      optionsManagers.forEach((optionManager) => optionManager.execGuards());
+    });
   });
 }