React: Fix nested components double render (T1299644) (DevExpress#30720)

Author: ajivanyandev

e2e/wrappers/builders/angular19/src/utils/componentFinder.ts

@@ -9,6 +9,11 @@ export const COMPONENTS = [
     name: 'InputsListInForm',
     component: import('@external/inputs-list-in-form/angular19/inputs-list-in-form.component').then((m) => m.InputsListInFormComponent),
   },
+  {
+    path: 'select-box-nested-validator',
+    name: 'SelectBoxNestedValidator',
+    component: import('@external/select-box-nested-validator/angular19/select-box-nested-validator.component').then((m) => m.SelectBoxNestedValidatorComponent),
+  },
   {
     path: 'text-box-dynamic-styles',
     name: 'TextBoxDynamicStyles',

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

@@ -9,6 +9,11 @@ const COMPONENTS = [
     name: 'InputsListInForm',
     component: () => import('@examples/inputs-list-in-form/react19/index.jsx')
   },
+  {
+    path: 'select-box-nested-validator',
+    name: 'SelectBoxNestedValidator',
+    component: () => import('@examples/select-box-nested-validator/react19/index.jsx')
+  },
   {
     path: 'text-box-dynamic-styles',
     name: 'TextBoxDynamicStyles',

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

@@ -9,6 +9,11 @@ const COMPONENTS = [
       name: 'InputsListInForm',
       component: () => import('@examples/inputs-list-in-form/vue3/index.vue')
     },
+    {
+      path: 'select-box-nested-validator',
+      name: 'SelectBoxNestedValidator',
+      component: () => import('@examples/select-box-nested-validator/vue3/index.vue')
+    },
     {
       path: 'text-box-dynamic-styles',
       name: 'TextBoxDynamicStyles',

e2e/wrappers/examples/select-box-nested-validator/angular19/index.ts

@@ -0,0 +1,6 @@
+import { SelectBoxNestedValidatorComponent } from './select-box-nested-validator.component';
+
+export default {
+  component: SelectBoxNestedValidatorComponent,
+  path: 'select-box-nested-validator'
+};

e2e/wrappers/examples/select-box-nested-validator/angular19/select-box-nested-validator.component.ts

@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { DxSelectBoxModule, DxFormModule, DxButtonModule, DxValidatorModule, DxValidationSummaryModule } from 'devextreme-angular';
+
+@Component({
+  selector: 'app-select-box-nested-validator',
+  standalone: true,
+  imports: [CommonModule, DxSelectBoxModule, DxFormModule, DxButtonModule, DxValidatorModule, DxValidationSummaryModule],
+  template: `
+    <dx-form 
+      [validationGroup]="groupName"
+      [formData]="formData">
+      <dxi-item>
+        <dx-select-box
+          [value]="formData.type"
+          (onValueChanged)="valueChanged($event)"
+          [items]="items"
+          [showClearButton]="true"
+          valueExpr="id"
+          displayExpr="description">
+          <dx-validator [validationGroup]="groupName">
+            <dxi-validation-rule
+              type="required"
+              message="Type is required">
+            </dxi-validation-rule>
+          </dx-validator>
+        </dx-select-box>
+      </dxi-item>
+    </dx-form>
+    <dx-validation-summary [validationGroup]="groupName"></dx-validation-summary>
+    <dx-button 
+      [validationGroup]="groupName"
+      text="Validate"
+      (onClick)="onClick($event)">
+    </dx-button>
+  `
+})
+export class SelectBoxNestedValidatorComponent {
+  groupName = "sharedGroup";
+  
+  formData = { code: null, type: null };
+  
+  items = [
+    {
+      id: 1,
+      description: "One",
+    },
+  ];
+
+  valueChanged = (e: any) => {
+    this.formData = {
+      ...this.formData,
+      type: e.value,
+    };
+  };
+
+  onClick = (e: any) => {
+    return e.validationGroup?.validate();
+  };
+}

e2e/wrappers/examples/select-box-nested-validator/react19/index.jsx

@@ -0,0 +1,64 @@
+import React from "react";
+
+import {
+  Form,
+  SimpleItem,
+  RequiredRule,
+} from "devextreme-react/form";
+import { Button } from "devextreme-react/button";
+import { SelectBox } from "devextreme-react/select-box";
+import { Validator } from "devextreme-react/validator";
+import { ValidationSummary } from "devextreme-react/validation-summary";
+
+const groupName = "sharedGroup";
+
+const onClick = (e) => {
+  return e.validationGroup?.validate();
+};
+
+const items = [
+  {
+    id: 1,
+    description: "One",
+  },
+];
+
+const SelectBoxWithValidator = () => {
+  const [formData, setFormData] = React.useState({ code: null, type: null });
+
+  const valueChanged = React.useCallback((e) => {
+    setFormData((prevFormData) => {
+      return {
+        ...prevFormData,
+        type: e.value,
+      };
+    });
+  }, []);
+
+  return (
+    <>
+      <Form validationGroup={groupName} formData={formData}>
+        <SimpleItem>
+          <SelectBox
+            value={formData.type}
+            onValueChanged={valueChanged}
+            items={items}
+            showClearButton
+            valueExpr={'id'}
+            displayExpr={'description'}
+          >
+            <Validator validationGroup={groupName}>
+              <RequiredRule message='Type is required' />
+            </Validator>
+          </SelectBox>
+        </SimpleItem>
+      </Form>
+      <ValidationSummary validationGroup={groupName} />
+      <Button validationGroup={groupName} text='Validate' onClick={onClick} />
+    </>
+  );
+}
+
+
+
+export default SelectBoxWithValidator;

e2e/wrappers/examples/select-box-nested-validator/vue3/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <DxForm 
+      :validation-group="groupName"
+      :form-data="formData">
+      <DxSimpleItem>
+        <DxSelectBox
+          :value="formData.type"
+          @value-changed="valueChanged"
+          :items="items"
+          :show-clear-button="true"
+          value-expr="id"
+          display-expr="description">
+          <DxValidator :validation-group="groupName">
+            <DxRequiredRule message="Type is required" />
+          </DxValidator>
+        </DxSelectBox>
+      </DxSimpleItem>
+    </DxForm>
+    <DxValidationSummary :validation-group="groupName" />
+    <DxButton 
+      :validation-group="groupName"
+      text="Validate"
+      @click="onClick">
+    </DxButton>
+  </div>
+</template>
+
+<script>
+import { reactive } from 'vue';
+import { DxSelectBox } from 'devextreme-vue/select-box';
+import { DxForm, DxSimpleItem } from 'devextreme-vue/form';
+import DxButton from 'devextreme-vue/button';
+import { DxValidator, DxRequiredRule } from 'devextreme-vue/validator';
+import DxValidationSummary from 'devextreme-vue/validation-summary';
+
+const groupName = "sharedGroup";
+
+const items = [
+  {
+    id: 1,
+    description: "One",
+  },
+];
+
+export default {
+  name: 'SelectBoxNestedValidator',
+  components: {
+    DxSelectBox,
+    DxForm,
+    DxSimpleItem,
+    DxButton,
+    DxValidator,
+    DxRequiredRule,
+    DxValidationSummary
+  },
+  setup() {
+    const formData = reactive({ code: null, type: null });
+
+    const valueChanged = (e) => {
+      formData.type = e.value;
+    };
+
+    const onClick = (e) => {
+      return e.validationGroup?.validate();
+    };
+
+    return {
+      groupName,
+      formData,
+      items,
+      valueChanged,
+      onClick
+    };
+  }
+};
+</script>

e2e/wrappers/tests/select-box-nested-validator.test.js

@@ -0,0 +1,41 @@
+import { Selector } from 'testcafe';
+import { testInFramework } from '../test-helpers';
+
+testInFramework('SelectBox nested validator scenarios', 'select-box-nested-validator', [
+    'SelectBox with nested Validator component should not render double errors',
+    async (t) => {
+        const validateButton = Selector('.dx-button-text').withText('Validate');
+        const validationSummary = Selector('.dx-validationsummary');
+        
+        await t
+            .expect(validateButton.exists).ok('Validate button should exist')
+            .expect(validationSummary.exists).ok('Validation summary should exist');
+
+        await t.click(validateButton);
+        
+        const updatedValidationSummaryItems = validationSummary.find('.dx-validationsummary-item');
+        await t.expect(updatedValidationSummaryItems.count).eql(1, 'Should have exactly one validation error in summary');
+        const errorMessage = await updatedValidationSummaryItems.nth(0).innerText;
+        await t.expect(errorMessage).eql('Type is required', 'Error message should be "Type is required"');
+    },
+
+    'SelectBox validation should pass when value is selected',
+    async (t) => {
+        const validateButton = Selector('.dx-button-text').withText('Validate');
+        const validationSummary = Selector('.dx-validationsummary');
+        const selectBox = Selector('.dx-selectbox');
+        const selectBoxArrow = selectBox.find('.dx-dropdowneditor-button');
+
+        await t.click(selectBoxArrow);
+        const firstItem = Selector('.dx-item').withText('One');
+
+        await t
+            .expect(firstItem.exists).ok('First item should exist in dropdown')
+            .click(firstItem);
+
+        await t.click(validateButton);
+
+        const updatedValidationSummaryItems = validationSummary.find('.dx-validationsummary-item');
+        await t.expect(updatedValidationSummaryItems.count).eql(0, 'Should have no validation errors when value is selected');
+    }
+]);

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

@@ -6,7 +6,15 @@ import { useState, useEffect } from 'react';
 import SelectBox from '../../../select-box';
 import TextBox from '../../../text-box';
 import DataGrid from '../../../data-grid';
+import {
+  Form,
+  RequiredRule,
+  SimpleItem,
+} from '../../../form';
+import Validator from '../../../validator';
+import ValidationSummary from '../../../validation-summary';
 import { ContextMenu, Item as ContextMenuItem } from '../../../context-menu';
+import Button from '../../../button';
 
 jest.useFakeTimers();
 
@@ -18,6 +26,67 @@ describe('integration tests', () => {
     testingLib.cleanup();
   });
 
+  it('renders selectbox with nested Validator component without double error rendering', async () => {
+    const user = userEvent.setup({ delay: null });
+    const groupName = "sharedGroup";
+    const onClick = (e: any) => {
+      return e.validationGroup?.validate();
+    };
+
+    const items = [
+      {
+        id: 1,
+        description: "One",
+      },
+    ];
+
+    const SelectBoxWithValidator = () => {
+      const [formData, setFormData] = React.useState({ code: null, type: null });
+
+      const valueChanged = React.useCallback((e) => {
+        setFormData((prevFormData) => {
+          return {
+            ...prevFormData,
+            type: e.value,
+          };
+        });
+      }, []);
+
+      return (
+        <>
+          <Form validationGroup={groupName} formData={formData}>
+            <SimpleItem>
+              <SelectBox
+                value={formData.type}
+                onValueChanged={valueChanged}
+                items={items}
+                showClearButton
+                valueExpr={'id'}
+                displayExpr={'description'}
+              >
+                <Validator validationGroup={groupName}>
+                  <RequiredRule message='Type is required' />
+                </Validator>
+              </SelectBox>
+            </SimpleItem>
+          </Form>
+          <ValidationSummary validationGroup={groupName} />
+          <Button validationGroup={groupName} text='Validate' onClick={onClick} />
+        </>
+      );
+    }
+
+    testingLib.render(
+      <React.Fragment>
+        <SelectBoxWithValidator />
+      </React.Fragment>
+    );
+
+    await user.click(testingLib.screen.getByText('Validate'));
+    const summaryElement = document.querySelector('.dx-validationsummary');
+    expect(summaryElement?.children.length).toBe(1);
+  })
+
   it('renders selectbox in strict mode when data source is specified dynamically without errors', () => {
     const Field = (data: any) => {
       return (<TextBox defaultValue={data && data.Name} />);