Fix chart annotation rendering (T1124149) (#802)

* fix chart axis and annotation render (T1124149)
+ test

In some cases template is rendered during forceUpdate (and scheduling is disabled in that case) therefore we need to call forceUpdate once more

Author: GoodDayForSurf

.github/workflows/tests.yml

@@ -26,8 +26,8 @@ jobs:
     - name: Clone devextreme repo
       run: test -d ../devextreme || git clone -b 23_1 https://github.com/devexpress/devextreme ../devextreme
 
-    - name: Use Node.js 16
-      uses: actions/setup-node@v2
+    - name: Use Node.js 15
+      uses: actions/setup-node@v3
       with:
         node-version: '15'
 

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

@@ -1200,4 +1200,33 @@ describe('async template', () => {
     expect(renderSpy.mock.calls.length).toBe(1);
     renderSpy.mockRestore();
   });
+
+  /* T1124149 */
+  it('should render template if it is added while previous rendering', async () => {
+    const ref = React.createRef() as React.RefObject<HTMLDivElement>;
+    const elementOptions: Record<string, any> = {};
+    elementOptions.itemRender = (data: any) => (
+      <div className={`template ${data.cls}`}>
+        Template
+      </div>
+    );
+
+    const { container } = render(
+      <ComponentWithAsyncTemplates {...elementOptions}>
+        <div ref={ref} />
+      </ComponentWithAsyncTemplates>,
+    );
+
+    act(() => {
+      renderItemTemplate({ cls: 'data1' }, ref.current, 0, () => {
+        renderItemTemplate({ cls: 'data2' }, ref.current, 0);
+      });
+    });
+
+    await waitForceUpdateFromTemplateRenderer();
+
+    await waitForceUpdateFromTemplateRenderer(); // sometimes first call not helps
+
+    expect(container.querySelector('.template.data2')?.outerHTML).toBe('<div class="template data2">Template</div>');
+  });
 });

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

@@ -11,6 +11,10 @@ class TemplatesRenderer extends React.PureComponent<{
 
   private mounted = false;
 
+  private shouldRepeatForceUpdate = false;
+
+  private isUpdateFuncLaunched = false;
+
   componentDidMount(): void {
     this.mounted = true;
   }
@@ -21,19 +25,30 @@ class TemplatesRenderer extends React.PureComponent<{
 
   public scheduleUpdate(useDeferUpdate: boolean, onRendered?: () => void): void {
     if (this.updateScheduled) {
+      this.shouldRepeatForceUpdate = this.isUpdateFuncLaunched;
       return;
     }
 
     this.updateScheduled = true;
 
     const updateFunc = useDeferUpdate ? deferUpdate : requestAnimationFrame;
+
     updateFunc(() => {
       if (this.mounted) {
+        this.isUpdateFuncLaunched = true;
+
         this.forceUpdate(() => {
           this.updateScheduled = false;
           onRendered?.();
+
+          if (this.shouldRepeatForceUpdate) {
+            this.shouldRepeatForceUpdate = false;
+            this.forceUpdate();
+          }
         });
       }
+
+      this.isUpdateFuncLaunched = false;
       this.updateScheduled = false;
     });
   }