TagBox: fix async fieldTemplate rendering in React 18 (T1283948) (DevExpress#29489)

Author: ksercs

apps/react/examples/Examples.tsx

@@ -26,6 +26,7 @@ import ValidationExample from './validation-example';
 import SelectBoxTemplatesExample from './selectbox-templates-example';
 import SelectBoxFieldTemplateExample from './selectbox-fieldtemplate-example';
 import SelectBoxParallelTemplateRenderExample from './selectbox-parallel-template-render-example';
+import TagBoxFieldTemplateCheckBoxesExample from './tagbox-fieldtemplate-checkboxes-example';
 
 const Examples = () => {
     return (
@@ -92,6 +93,10 @@ const Examples = () => {
                 <SelectBoxTemplatesExample />
             </Example>
 
+            <Example title="TagBox with field template and showSelectionControls=true">
+                <TagBoxFieldTemplateCheckBoxesExample />
+            </Example>
+
             <Example title="SelectBox example with field template (controlled mode)">
                 <SelectBoxFieldTemplateExample />
             </Example>

apps/react/examples/tagbox-fieldtemplate-checkboxes-example.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { TagBox } from 'devextreme-react/tag-box';
+import { TextBox } from 'devextreme-react/text-box';
+
+function Field() {
+  return (<TextBox placeholder="test" />);
+}
+
+const items = ['Item 1', 'Item 2', 'Item 3'];
+
+export default (): React.ReactElement | null => {
+  return (
+    <TagBox
+      items={items}
+      showSelectionControls={true}
+      fieldRender={Field}
+    />
+  );
+};

packages/devextreme/js/__internal/ui/m_tag_box.ts

@@ -657,10 +657,7 @@ const TagBox = (SelectBox as any).inherit({
     this._updateTagsContainer(this._$textEditorInputContainer);
     this._renderInputSize();
     this._renderTags()
-      .done(() => {
-        this._popup && this._popup.refreshPosition();
-        d.resolve();
-      })
+      .done(d.resolve)
       .fail(d.reject);
 
     return d.promise();
@@ -956,7 +953,8 @@ const TagBox = (SelectBox as any).inherit({
       this._selectedItems = this._getItemsFromPlain(this._valuesToUpdate);
 
       if (this._selectedItems.length === this._valuesToUpdate.length) {
-        this._renderTagsImpl(this._selectedItems);
+        this._tagsToRender = this._selectedItems;
+        this._renderTagsImpl();
         isPlainDataUsed = true;
         d.resolve();
       }
@@ -970,7 +968,8 @@ const TagBox = (SelectBox as any).inherit({
             return;
           }
 
-          this._renderTagsImpl(items);
+          this._tagsToRender = items;
+          this._renderTagsImpl();
           d.resolve();
         })
         .fail(d.reject);
@@ -979,12 +978,15 @@ const TagBox = (SelectBox as any).inherit({
     return d.promise();
   },
 
-  _renderTagsImpl(items) {
-    this._renderTagsCore(items);
-    this._renderEmptyState();
+  _renderTagsImpl(): void {
+    this._renderField();
 
-    if (!this._preserveFocusedTag) {
-      this._clearTagFocus();
+    this.option('selectedItems', this._selectedItems.slice());
+    this._cleanTags();
+
+    const fieldTemplate = this._getFieldTemplate();
+    if (!fieldTemplate) {
+      this._renderTagsCore();
     }
   },
 
@@ -1042,31 +1044,24 @@ const TagBox = (SelectBox as any).inherit({
   },
 
   _integrateInput() {
-    this._isInputReady.resolve();
     this.callBase();
 
     const tagsContainer = this.$element().find(`.${TEXTEDITOR_INPUT_CONTAINER_CLASS}`);
 
     this._updateTagsContainer(tagsContainer);
     this._renderTagRemoveAction();
+    this._renderTagsCore();
   },
 
-  _renderTagsCore(items) {
-    this._isInputReady?.reject();
-
-    this._isInputReady = Deferred();
-    this._renderField();
-
-    this.option('selectedItems', this._selectedItems.slice());
-    this._cleanTags();
+  _renderTagsCore() {
+    this._renderTagsElements(this._tagsToRender);
+    this._renderEmptyState();
 
-    if (this._input().length > 0) {
-      this._isInputReady.resolve();
+    if (!this._preserveFocusedTag) {
+      this._clearTagFocus();
     }
 
-    when(this._isInputReady).done(() => {
-      this._renderTagsElements(items);
-    });
+    this._popup?.refreshPosition();
   },
 
   _renderTagsElements(items) {
@@ -1534,6 +1529,7 @@ const TagBox = (SelectBox as any).inherit({
     delete this._defaultTagTemplate;
     delete this._valuesToUpdate;
     delete this._tagTemplate;
+    delete this._tagsToRender;
   },
 
   _getSelectedItemsDifference(newItems, previousItems) {