Fix/options manager resetter with tests (DevExpress#29856)

Author: sergey-kras

apps/react/examples/Examples.tsx

@@ -27,10 +27,14 @@ 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';
+import FormWithNestedExample from './form-with-nested';
+
 
 const Examples = () => {
     return (
         <div>
+            <FormWithNestedExample />
+            
             <AccordionExample />
 
             <BoxExample />

apps/react/examples/form-with-nested.tsx

@@ -0,0 +1,110 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import 'devextreme-react/text-area';
+import Form, {
+  GroupItem, SimpleItem, Label, ButtonItem,
+} from 'devextreme-react/form';
+
+const employeeCore = {
+    FirstName: 'John',
+    LastName: 'Heart',
+    Address: '351 S Hill St., Los Angeles, CA',
+    City: 'Atlanta',
+    Phones: [],
+  };
+  
+function getEmployee() {
+    return employeeCore;
+}
+
+const employee = getEmployee();
+
+const App = () => {
+  const [phones, setPhones] = useState(employee.Phones);
+  const [isHomeAddressVisible, setIsHomeAddressVisible] = useState(true);
+  const formData = useMemo(() => ({ ...employee, Phones: phones }), [phones]);
+
+  const CheckBoxOptions = useMemo(() => ({
+    text: 'Show Address',
+    value: isHomeAddressVisible,
+    onValueChanged: (e) => {
+      setIsHomeAddressVisible(e.component.option('value'));
+    },
+  }), [isHomeAddressVisible]);
+
+  const PhoneEditorOptions = useCallback((index: number) => ({
+    mask: '+1 (X00) 000-0000',
+    maskRules: { X: /[01-9]/ },
+    buttons: [{
+      name: 'trash',
+      location: 'after',
+      options: {
+        stylingMode: 'text',
+        icon: 'trash',
+        onClick: () => {
+          const newPhones = phones.slice(0, index).concat(phones.slice(index + 1));
+          setPhones(newPhones);
+        },
+      },
+    }],
+  }), [phones]);
+
+  const PhoneButtonOptions = useMemo(() => ({
+    icon: 'add',
+    text: 'Add phone',
+    onClick: () => {
+      setPhones((prevPhones) => [...prevPhones, '']);
+    },
+  }), []);
+
+  return (
+    <React.Fragment>
+      <div className="long-title"><h3>Personal details</h3></div>
+      <div className="form-container">
+        <Form
+          colCount={2}
+          id="form"
+          formData={formData}>
+          <GroupItem>
+            <GroupItem>
+              <GroupItem caption="Personal Data">
+                <SimpleItem dataField="FirstName" />
+                <SimpleItem dataField="LastName" />
+                <SimpleItem editorType="dxCheckBox" editorOptions={CheckBoxOptions} />
+              </GroupItem>
+            </GroupItem>
+            <GroupItem>
+              <GroupItem 
+                name="HomeAddress"
+                caption="Home Address"
+                visible={isHomeAddressVisible}>
+                <SimpleItem dataField="Address" />
+                <SimpleItem dataField="City" />
+              </GroupItem>
+            </GroupItem>
+          </GroupItem>
+          <GroupItem 
+            caption="Phones"
+            name="phones-container">
+            <GroupItem name="phones">
+              {phones.map((_, index) => (
+                <SimpleItem
+                  key={`phone-${index}`}
+                  dataField={`Phones[${index}]`}
+                  editorOptions={PhoneEditorOptions(index)}>
+                  <Label text={`Phone ${index + 1}`} />
+                </SimpleItem>
+              ))}
+            </GroupItem>
+            <ButtonItem
+              horizontalAlignment="left"
+              cssClass="add-phone-button"
+              buttonOptions={PhoneButtonOptions}
+            />
+          </GroupItem>
+        </Form>
+      </div>
+    </React.Fragment>
+  );
+};
+
+export default App;

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

@@ -4,6 +4,11 @@ export const COMPONENTS = [
     name: 'Button',
     component: import('@external/button/angular19/button.component').then((m) => m.ButtonComponent),
   },
+  {
+    path: 'inputs-list-in-form',
+    name: 'InputsListInForm',
+    component: import('@external/inputs-list-in-form/angular19/inputs-list-in-form.component').then((m) => m.InputsListInFormComponent),
+  },
 ];
 
 export function findComponentByPath(path: string) {

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

@@ -3,7 +3,12 @@ const COMPONENTS = [
     path: 'button',
     name: 'Button',
     component: () => import('@examples/button/react19/index.jsx')
-  }
+  },
+  {
+    path: 'inputs-list-in-form',
+    name: 'InputsListInForm',
+    component: () => import('@examples/inputs-list-in-form/react19/index.jsx')
+}
 ];
 
 export function getAllComponents() {

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

@@ -3,7 +3,12 @@ const COMPONENTS = [
       path: 'button',
       name: 'Button',
       component: () => import('@examples/button/vue3/index.vue')
+    },
+    {
+        path: 'inputs-list-in-form',
+        name: 'InputsListInForm',
+        component: () => import('@examples/inputs-list-in-form/vue3/index.vue')
     }
   ];
 
-export default COMPONENTS; 
+export default COMPONENTS; 

e2e/wrappers/examples/inputs-list-in-form/angular19/employee.model.ts

@@ -0,0 +1,15 @@
+export class Employee {
+    FirstName: string = '';
+    LastName: string = '';
+    Address: string = '';
+    City: string = '';
+    Phones: string[] = [];
+  }
+  
+  export const employee: Employee = {
+    FirstName: 'John',
+    LastName: 'Heart',
+    Address: '351 S Hill St., Los Angeles, CA',
+    City: 'Atlanta',
+    Phones: [],
+  };

e2e/wrappers/examples/inputs-list-in-form/angular19/employee.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+import { Employee, employee } from './employee.model';
+
+@Injectable({ providedIn: 'root' })
+export class EmployeeService {
+  getEmployee(): Employee {
+    return employee;
+  }
+}

e2e/wrappers/examples/inputs-list-in-form/angular19/index.ts

@@ -0,0 +1,6 @@
+import { InputsListInFormComponent } from './inputs-list-in-form.component';
+
+export default {
+  component: InputsListInFormComponent,
+  path: 'inputs-list-in-form'
+}; 

e2e/wrappers/examples/inputs-list-in-form/angular19/inputs-list-in-form.component.html

@@ -0,0 +1,45 @@
+<div class="long-title">
+  <h3>Personal details</h3>
+</div>
+<div id="form-container">
+  <dx-form id="form" [colCount]="2" [formData]="employee">
+    <dxi-item itemType="group">
+      <dxi-item itemType="group" caption="Personal Data">
+        <dxi-item dataField="FirstName"></dxi-item>
+        <dxi-item dataField="LastName"></dxi-item>
+        <dxi-item editorType="dxCheckBox" [editorOptions]="checkBoxOptions"></dxi-item>
+      </dxi-item>
+      <dxi-item itemType="group">
+        <dxi-item
+          itemType="group"
+          caption="Home Address"
+          name="HomeAddress"
+          [visible]="isHomeAddressVisible"
+        >
+          <dxi-item dataField="Address"></dxi-item>
+          <dxi-item dataField="City"></dxi-item>
+        </dxi-item>
+      </dxi-item>
+    </dxi-item>
+    <dxi-item itemType="group" caption="Phones" name="phones-container">
+      <dxi-item
+        itemType="group"
+        name="phones"
+        *ngFor="let phone of phoneOptions; let i = index"
+      >
+        <dxi-item
+          [dataField]="'Phones[' + i + ']'"
+          [editorOptions]="phoneOptions[i]"
+        >
+          <dxo-label [text]="'Phone ' + (i + 1)"></dxo-label>
+        </dxi-item>
+      </dxi-item>
+      <dxi-item
+        itemType="button"
+        horizontalAlignment="left"
+        cssClass="add-phone-button"
+        [buttonOptions]="addPhoneButtonOptions"
+      ></dxi-item>
+    </dxi-item>
+  </dx-form>
+</div>

e2e/wrappers/examples/inputs-list-in-form/angular19/inputs-list-in-form.component.ts

@@ -0,0 +1,66 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DxFormModule } from 'devextreme-angular';
+import { EmployeeService } from './employee.service';
+import { DxCheckBoxTypes } from 'devextreme-angular/ui/check-box';
+import { DxButtonTypes } from 'devextreme-angular/ui/button';
+import { DxTextBoxTypes } from 'devextreme-angular/ui/text-box';
+import { Employee } from './employee.model';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [CommonModule, DxFormModule],
+  templateUrl: './inputs-list-in-form.component.html',
+})
+export class InputsListInFormComponent {
+  employee: Employee;
+  isHomeAddressVisible = true;
+  phoneOptions: DxTextBoxTypes.Properties[] = [];
+
+  checkBoxOptions: DxCheckBoxTypes.Properties = {
+    text: 'Show Address',
+    value: true,
+    onValueChanged: (e: DxCheckBoxTypes.ValueChangedEvent) => {
+      this.isHomeAddressVisible = e.component.option('value') as boolean;
+    },
+  };
+
+  addPhoneButtonOptions: DxButtonTypes.Properties = {
+    icon: 'add',
+    text: 'Add phone',
+    onClick: () => {
+      this.employee.Phones.push('');
+      this.phoneOptions = this.getPhonesOptions(this.employee.Phones);
+    },
+  };
+
+  constructor(service: EmployeeService) {
+    this.employee = service.getEmployee();
+    this.phoneOptions = this.getPhonesOptions(this.employee.Phones);
+  }
+
+  getPhonesOptions = (phones: string[]) =>
+    phones.map((_, index) => this.generateNewPhoneOptions(index));
+
+  generateNewPhoneOptions(index: number): DxTextBoxTypes.Properties {
+    return {
+      mask: '+1 (X00) 000-0000',
+      maskRules: { X: /[01-9]/ },
+      buttons: [
+        {
+          name: 'trash',
+          location: 'after',
+          options: {
+            stylingMode: 'text',
+            icon: 'trash',
+            onClick: () => {
+              this.employee.Phones.splice(index, 1);
+              this.phoneOptions = this.getPhonesOptions(this.employee.Phones);
+            },
+          },
+        },
+      ],
+    };
+  }
+}