fix the second case of two-template-roots regression (T1311798) (#31591) (#31609)

Author: VasilyStrelyaev

e2e/wrappers/builders/react19/src/utils/componentFinder.js

@@ -23,6 +23,11 @@ const COMPONENTS = [
     path: 'chat-template-rerender',
     name: 'ChatTemplateRerender',
     component: () => import('@examples/chat-template-rerender/react19/index.jsx')
+  },
+  {
+    path: 'gantt-template-state-update',
+    name: 'GanttTemplateStateUpdate',
+    component: () => import('@examples/gantt-template-state-update/react19/index.jsx')
   }
 ];
 

e2e/wrappers/examples/gantt-template-state-update/react19/data.js

@@ -0,0 +1,172 @@
+export const currentDate = new Date(Date.now());
+const month = currentDate.getMonth();
+const year = currentDate.getFullYear();
+
+export const tasks = [{
+  id: 1,
+  parentId: 0,
+  title: 'Analysis/Software Requirements',
+  start: new Date(year, month, 1),
+  end: new Date(year, month, 28),
+  progress: 31,
+}, {
+  id: 2,
+  parentId: 1,
+  title: 'Conduct needs analysis',
+  start: new Date(year, month, 1),
+  end: new Date(year, month, 3),
+  progress: 15,
+}, {
+  id: 3,
+  parentId: 1,
+  title: 'Draft preliminary software specifications',
+  start: new Date(year, month, 3),
+  end: new Date(year, month, 5),
+  progress: 30,
+}, {
+  id: 4,
+  parentId: 1,
+  title: 'Review software specifications/budget with team',
+  start: new Date(year, month, 4),
+  end: new Date(year, month, 6),
+  progress: 60,
+}, {
+  id: 5,
+  parentId: 1,
+  title: 'Incorporate feedback on software specifications',
+  start: new Date(year, month, 6),
+  end: new Date(year, month, 8),
+  progress: 45,
+}, {
+  id: 6,
+  parentId: 1,
+  title: 'Develop delivery timeline',
+  start: new Date(year, month, 8),
+  end: new Date(year, month, 14),
+  progress: 15,
+}, {
+  id: 7,
+  parentId: 1,
+  title: 'Obtain approvals to proceed (concept, timeline, budget)',
+  start: new Date(year, month, 14),
+  end: new Date(year, month, 20),
+  progress: 15,
+}, {
+  id: 8,
+  parentId: 1,
+  title: 'Draft preliminary software specifications',
+  start: new Date(year, month, 20),
+  end: new Date(year, month, 25),
+  progress: 0,
+}, {
+  id: 9,
+  parentId: 1,
+  title: 'Secure required resources',
+  start: new Date(year, month, 25),
+  end: new Date(year, month, 28),
+  progress: 0,
+}];
+
+export const dependencies = [{
+  id: 1,
+  predecessorId: 2,
+  successorId: 3,
+  type: 0,
+}, {
+  id: 2,
+  predecessorId: 3,
+  successorId: 4,
+  type: 0,
+}, {
+  id: 3,
+  predecessorId: 4,
+  successorId: 5,
+  type: 0,
+}, {
+  id: 4,
+  predecessorId: 5,
+  successorId: 6,
+  type: 0,
+}, {
+  id: 5,
+  predecessorId: 6,
+  successorId: 7,
+  type: 0,
+}, {
+  id: 6,
+  predecessorId: 7,
+  successorId: 8,
+  type: 0,
+}, {
+  id: 7,
+  predecessorId: 8,
+  successorId: 9,
+  type: 0,
+}];
+
+export const resources = [{
+  id: 1,
+  text: 'John Heart',
+}, {
+  id: 2,
+  text: 'Paul Peyton',
+}, {
+  id: 3,
+  text: 'Robert Reagan',
+}, {
+  id: 4,
+  text: 'Greta Sims',
+}, {
+  id: 5,
+  text: 'Brett Wade',
+}, {
+  id: 6,
+  text: 'Sandra Johnson',
+}, {
+  id: 7,
+  text: 'Kevin Carter',
+}, {
+  id: 8,
+  text: 'Cynthia Stanwick',
+}, {
+  id: 9,
+  text: 'Olivia Samuelson',
+}];
+
+export const resourceAssignments = [{
+  id: 0,
+  taskId: 1,
+  resourceId: 1,
+}, {
+  id: 1,
+  taskId: 2,
+  resourceId: 2,
+}, {
+  id: 2,
+  taskId: 3,
+  resourceId: 3,
+}, {
+  id: 3,
+  taskId: 4,
+  resourceId: 4,
+}, {
+  id: 4,
+  taskId: 5,
+  resourceId: 5,
+}, {
+  id: 5,
+  taskId: 6,
+  resourceId: 6,
+}, {
+  id: 6,
+  taskId: 7,
+  resourceId: 7,
+}, {
+  id: 7,
+  taskId: 8,
+  resourceId: 8,
+}, {
+  id: 8,
+  taskId: 9,
+  resourceId: 9,
+}];

e2e/wrappers/examples/gantt-template-state-update/react19/index.jsx

@@ -0,0 +1,87 @@
+import React, { useState } from "react";
+import Gantt, {
+  Tasks,
+  Dependencies,
+  Resources,
+  ResourceAssignments,
+  Column,
+  Editing,
+} from "devextreme-react/gantt";
+import { tasks, dependencies, resources, resourceAssignments } from "./data";
+
+function App() {
+  const [showData, setShowData] = useState(true);
+
+  const toggleData = () => setShowData(!showData);
+
+  const taskContentRender = ({ taskData, taskSize, taskResources }) => {
+    const getImagePath = (taskId) => {
+      const imgPath =
+        "https://js.devexpress.com/React/Demos/WidgetsGallery/JSDemos/images/employees";
+      const img = taskId < 10 ? `0${taskId}` : taskId;
+      return `${imgPath}/${img}.png`;
+    };
+
+    const getTaskColor = (taskId) => {
+      const color = taskId % 6;
+      return `custom-task-color-${color}`;
+    };
+
+    return (
+      <div
+        className={`custom-task ${getTaskColor(taskData.id)}`}
+        style={{ width: `${taskSize.width}px` }}
+      >
+        <div className="custom-task-img-wrapper">
+          <img
+            className="custom-task-img"
+            src={getImagePath(taskData.id)}
+            alt={taskData.title}
+          />
+        </div>
+        <div className="custom-task-wrapper">
+          <div className="custom-task-title">{taskData.title}</div>
+          {taskResources?.length > 0 && (
+            <div className="custom-task-row">{taskResources[0].text}</div>
+          )}
+        </div>
+        <div
+          className="custom-task-progress"
+          style={{ width: `${taskData.progress}%` }}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <div id="form-demo">
+      <div className="widget-container">
+        <button onClick={toggleData}>
+          {showData ? "Hide Data" : "Show Data"}
+        </button>
+
+        <Gantt
+          taskListWidth={500}
+          height={700}
+          scaleType="days"
+          taskContentRender={taskContentRender}
+        >
+          <Tasks dataSource={showData ? tasks : []} />
+          <Dependencies dataSource={showData ? dependencies : []} />
+          <Resources dataSource={showData ? resources : []} />
+          <ResourceAssignments
+            dataSource={showData ? resourceAssignments : []}
+          />
+
+          <Column dataField="title" caption="Subject" width={300} />
+          <Column dataField="start" caption="Start Date" />
+          <Column dataField="end" caption="End Date" />
+
+          <Editing enabled />
+        </Gantt>
+      </div>
+    </div>
+  );
+}
+
+export default App;

e2e/wrappers/tests/gantt-template-state-update.test.js

@@ -0,0 +1,17 @@
+import { Selector } from 'testcafe';
+import { testInFramework } from '../test-helpers';
+
+if(process.env.FRAMEWORK === 'react') {
+  testInFramework('Gantt template state update', 'gantt-template-state-update', [
+      'Gantt should be able to ummount its template when a parent component\'s state update happens',
+      async (t) => {
+        const hideButton = Selector('button').withText('Hide Data');
+        const noDataPlaceholder = Selector('.dx-treelist-nodata');
+
+        await t
+          .click(hideButton)
+          .expect(noDataPlaceholder.visible).ok()
+          .expect(noDataPlaceholder.textContent).eql('No data');
+      }
+  ]);
+}

packages/devextreme-react/src/core/template-wrapper.tsx

@@ -67,11 +67,7 @@ const TemplateWrapperComponent: FC<TemplateWrapperProps> = ({
       removalListenerElement.current,
     ].forEach((el) => el && events.off(el, DX_REMOVE_EVENT, onTemplateRemoved));
 
-    // In case of multiple root elements, letting the widget remove them all sync
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    Promise.resolve().then(() => {
-      onRemoved(componentKey);
-    });
+    onRemoved(componentKey);
   }, [onRemoved]);
 
   useLayoutEffect(() => {