fix(react-wrapper): fixed T1279646 (#29268) (#29339)

Co-authored-by: sergey-kras <[email protected]>

Author: sergey-kras

apps/react/examples/Examples.tsx

@@ -23,6 +23,7 @@ import TextBoxExample from './text-box-example';
 import ToolbarExample from './toolbar-example';
 import ValidationExample from './validation-example';
 // import DateBoxExample from './date-box-example';
+import SelectBoxCustomExample from './selector-custom-example';
 
 const Examples = () => {
     return (
@@ -85,7 +86,11 @@ const Examples = () => {
                 <SelectBoxExample />
             </Example>
 
-            {/* <StandaloneValidatorExample /> */}
+            <Example title="SelectBox example with custom components">
+                <SelectBoxCustomExample />
+            </Example>
+
+             {/*<StandaloneValidatorExample />*/}
 
         </div>
     );

apps/react/examples/example-block.tsx

@@ -7,14 +7,14 @@ interface IProps {
 }
 
 const Example = (props: IProps): JSX.Element => {
-  const { state, title, children } = props;
+  const { state, title, children, id } = props;
   let stateBlock: JSX.Element | null = null;
   if (state) {
     stateBlock = <pre className="example-state">{JSON.stringify(state, null, '  ')}</pre>;
   }
 
   return (
-    <div className="example-block">
+    <div className="example-block" id={id}>
       <div className="example-header">
         <h4 className="bg-primary example-title">{title || 'example'}</h4>
         {stateBlock}

apps/react/examples/selector-custom-example.tsx

@@ -0,0 +1,84 @@
+import React, { useCallback, useState } from "react";
+import { SelectBoxTypes } from "devextreme-react/select-box";
+import { SelectBox } from "devextreme-react";
+import { TextBox } from "devextreme-react";
+
+const products = [{
+    ID: 1,
+    Name: 'HD Video Player',
+    Price: 330,
+    Current_Inventory: 225,
+    Backorder: 0,
+    Manufacturing: 10,
+    Category: 'Video Players',
+    ImageSrc: 'https://js.devexpress.com/React/Demos/WidgetsGallery/JSDemos/images/products/1-small.png',
+}, {
+    ID: 2,
+    Name: 'SuperHD Player',
+    Price: 400,
+    Current_Inventory: 150,
+    Backorder: 0,
+    Manufacturing: 25,
+    Category: 'Video Players',
+    ImageSrc: 'https://js.devexpress.com/React/Demos/WidgetsGallery/JSDemos/images/products/2-small.png',
+}];
+
+const templatedProductLabel = { "aria-label": "Templated Product" };
+const nameLabel = { "aria-label": "Name" };
+function Item(data) {
+    return (
+        <div className="custom-item">
+            <img
+                alt="Product name"
+                src={data.ImageSrc}
+            />
+            <div className="product-name">{data.Name}</div>
+        </div>
+    );
+}
+
+function Field(data: { ImageSrc: any; Name: any }) {
+    return (
+        <div className="custom-item">
+            <div className="value">{data.Name}</div>
+            <img
+                alt="Product name"
+                src={data && data.ImageSrc} />
+            <TextBox
+                value= {data?.Name || ''}
+                className="product-name"
+                inputAttr={nameLabel}
+                defaultValue={data && data.Name}
+                readOnly={true}
+            />
+        </div>
+    );
+}
+
+function SelectBoxCustomExample() {
+    const [value, setValue] = useState('1');
+    const onValueChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
+        setValue(e.value)
+    }, []);
+
+    return (
+        <div>
+            <div>
+                value: {value}
+            </div>
+            <SelectBox
+                onValueChanged={onValueChanged}
+                id="custom-templates"
+                dataSource={products}
+                displayExpr="Name"
+                inputAttr={templatedProductLabel}
+                valueExpr="ID"
+                defaultValue={products[0].ID}
+                fieldRender={Field}
+                itemRender={Item}
+            />
+        </div>
+    );
+}
+
+export default SelectBoxCustomExample;

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

@@ -36,6 +36,24 @@ function normalizeProps(props: ITemplateArgs): ITemplateArgs | ITemplateArgs['da
   return props;
 }
 
+const createMapKey = (key1: any, key2: HTMLElement) => ({ key1, key2 });
+
+const unsubscribeOnRemoval = (container: HTMLElement, onRemoved: () => void) => {
+  if (container.nodeType === Node.ELEMENT_NODE) {
+    events.off(container, DX_REMOVE_EVENT, onRemoved);
+  }
+};
+
+const subscribeOnRemoval = (container: HTMLElement, onRemoved: () => void) => {
+  if (container.nodeType === Node.ELEMENT_NODE) {
+    events.on(container, DX_REMOVE_EVENT, onRemoved);
+  }
+};
+
+const unwrapElement = (element: any): HTMLElement => (element.get ? element.get(0) : element);
+
+const getRandomId = () => `${generateID()}${generateID()}${generateID()}`;
+
 export const TemplateManager: FC<TemplateManagerProps> = ({ init, onTemplatesRendered }) => {
   const [instantiationModels, setInstantiationModels] = useState({
     collection: new TemplateInstantiationModels(),
@@ -44,24 +62,6 @@ export const TemplateManager: FC<TemplateManagerProps> = ({ init, onTemplatesRen
   const widgetId = useRef('');
   const templateFactories = useRef<Record<string, TemplateFunc>>({});
 
-  const subscribeOnRemoval = useCallback((container: HTMLElement, onRemoved: () => void) => {
-    if (container.nodeType === Node.ELEMENT_NODE) {
-      events.on(container, DX_REMOVE_EVENT, onRemoved);
-    }
-  }, []);
-
-  const unsubscribeOnRemoval = useCallback((container: HTMLElement, onRemoved: () => void) => {
-    if (container.nodeType === Node.ELEMENT_NODE) {
-      events.off(container, DX_REMOVE_EVENT, onRemoved);
-    }
-  }, []);
-
-  const unwrapElement = useCallback((element: any): HTMLElement => (element.get ? element.get(0) : element), []);
-
-  const createMapKey = useCallback((key1: any, key2: HTMLElement) => ({ key1, key2 }), []);
-
-  const getRandomId = useCallback(() => `${generateID()}${generateID()}${generateID()}`, []);
-
   const { collection } = instantiationModels;
 
   const getRenderFunc: GetRenderFuncFn = useCallback((templateKey) => ({
@@ -99,7 +99,7 @@ export const TemplateManager: FC<TemplateManagerProps> = ({ init, onTemplatesRen
     setInstantiationModels({ collection });
 
     return containerElement;
-  }, [unsubscribeOnRemoval, createMapKey, collection]);
+  }, [collection]);
 
   useMemo(() => {
     function getTemplateFunction(template: ITemplate): TemplateFunc {

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

@@ -10,6 +10,7 @@ import {
   useMemo,
   memo,
   FC,
+  MutableRefObject,
 } from 'react';
 
 import { createPortal } from 'react-dom';
@@ -25,9 +26,9 @@ const createHiddenNode = (
   const style = { display: 'none' };
   switch (containerNodeName) {
     case 'TABLE':
-      return <tbody style={style} ref={ref}></tbody>;
+      return <tbody style={style} ref={ref} />;
     case 'TBODY':
-      return <tr style={style} ref={ref}></tr>;
+      return <tr style={style} ref={ref} />;
     default:
       return React.createElement(defaultElement, { style, ref });
   }
@@ -82,17 +83,15 @@ const TemplateWrapperComponent: FC<TemplateWrapperProps> = ({
     }
 
     return () => {
-      if (element.current) {
-        container.appendChild(element.current);
-      }
-
-      if (hiddenNodeElement.current) {
-        container.appendChild(hiddenNodeElement.current);
-      }
-
-      if (removalListenerElement.current) {
-        container.appendChild(removalListenerElement.current);
-      }
+      const safeAppend = (child?: MutableRefObject<HTMLElement | undefined>) => {
+        if (child?.current && container && !container.contains(child.current)) {
+          container.appendChild(child.current);
+        }
+      };
+
+      safeAppend(element);
+      safeAppend(hiddenNodeElement);
+      safeAppend(removalListenerElement);
 
       if (el) {
         events.off(el, DX_REMOVE_EVENT, onTemplateRemoved);