Template-renderer: fix template scheduled rendering (T1102789) (#747)

Author: GoodDayForSurf

packages/devextreme-react/src/core/__tests__/templates-renderer.test.tsx

@@ -89,3 +89,30 @@ jest.mock('devextreme/core/utils/common', () => ({
     });
   });
 });
+
+fdescribe('option update', () => {
+  it('should call forceUpdateCallback and reset "updateScheduled" after forceUpdateCallback', async () => {
+    const ref = React.createRef<TemplatesRenderer>();
+    const templatesStore = new TemplatesStore(() => { });
+
+    deferUpdate.mockImplementation((func, _) => {
+      func();
+    });
+
+    render(<TemplatesRenderer templatesStore={templatesStore} ref={ref} />);
+
+    const current = ref.current!;
+    const actualForceUpdateCallback = current.forceUpdateCallback;
+    const spyForceUpdateCallback = jest.spyOn(current, 'forceUpdateCallback').mockImplementation(() => {
+      expect((current as any).updateScheduled).toEqual(true);
+
+      actualForceUpdateCallback();
+
+      expect((current as any).updateScheduled).toEqual(false);
+    });
+
+    current.scheduleUpdate(true);
+
+    expect(spyForceUpdateCallback).toHaveBeenCalledTimes(1);
+  });
+});

packages/devextreme-react/src/core/templates-renderer.tsx

@@ -6,7 +6,6 @@ import { TemplatesStore } from './templates-store';
 
 class TemplatesRenderer extends React.PureComponent<{ templatesStore: TemplatesStore }> {
   private updateScheduled = false;
-
   private mounted = false;
 
   componentDidMount(): void {
@@ -17,6 +16,10 @@ class TemplatesRenderer extends React.PureComponent<{ templatesStore: TemplatesS
     this.mounted = false;
   }
 
+  forceUpdateCallback = () => {
+    this.updateScheduled = false;
+  }
+
   public scheduleUpdate(useDeferUpdate: boolean): void {
     if (this.updateScheduled) {
       return;
@@ -27,9 +30,8 @@ class TemplatesRenderer extends React.PureComponent<{ templatesStore: TemplatesS
     const updateFunc = useDeferUpdate ? deferUpdate : requestAnimationFrame;
     updateFunc(() => {
       if (this.mounted) {
-        this.forceUpdate();
+        this.forceUpdate(this.forceUpdateCallback);
       }
-
       this.updateScheduled = false;
     });
   }