Form: DateRangeBox, RangeSlider should be rendered with name attributes for start and end inputs (T1256743) (DevExpress#29157)

Author: EugeniyKiyashko

packages/devextreme/js/__internal/ui/form/m_form.layout_manager.utils.ts

@@ -16,6 +16,10 @@ const EDITORS_WITH_ARRAY_VALUE: FormItemComponent[] = [
   'dxRangeSlider',
   'dxDateRangeBox',
 ];
+const EDITORS_WITH_MULTIPLE_INPUT_FIELDS: FormItemComponent[] = [
+  'dxRangeSlider',
+  'dxDateRangeBox',
+];
 const EDITORS_WITH_SPECIFIC_LABELS: FormItemComponent[] = ['dxRangeSlider', 'dxSlider'];
 export const EDITORS_WITHOUT_LABELS: FormItemComponent[] = [
   'dxCalendar',
@@ -264,8 +268,32 @@ function _convertToEditorOptions({
     }
   }
 
-  if (defaultEditorName && !result.name) {
-    result.name = defaultEditorName;
+  if (defaultEditorName) {
+    if (EDITORS_WITH_MULTIPLE_INPUT_FIELDS.includes(editorType)) {
+      if (editorType === 'dxRangeSlider') {
+        if (!result.startName) {
+          result.startName = `${defaultEditorName}Start`;
+        }
+        if (!result.endName) {
+          result.endName = `${defaultEditorName}End`;
+        }
+      }
+
+      if (editorType === 'dxDateRangeBox') {
+        if (!result.startDateName) {
+          result.startDateName = `${defaultEditorName}Start`;
+        }
+        if (!result.endDateName) {
+          result.endDateName = `${defaultEditorName}End`;
+        }
+      }
+
+      return result;
+    }
+
+    if (!result.name) {
+      result.name = defaultEditorName;
+    }
   }
 
   return result;
@@ -275,7 +303,7 @@ function _convertToEditorOptions({
 function _hasRequiredRuleInSet(rules) {
   let hasRequiredRule;
 
-  if (rules && rules.length) {
+  if (rules?.length) {
     // @ts-expect-error
     each(rules, (index, rule) => {
       if (rule.type === 'required') {

packages/devextreme/testing/tests/DevExpress.ui.widgets.form/formLayoutManager.markup.tests.js

@@ -2688,6 +2688,40 @@ QUnit.module('Supported editors', () => {
         assert.deepEqual(layoutManager.option('layoutData.noRange'), [2, 6], 'data updated');
     });
 
+    test('RangeSlider should be rendered with passed name attributes for startName and endName inputs (T1256743)', function(assert) {
+        const layoutManager = $('#container').dxLayoutManager({
+            layoutData: {
+                range: [10, 20]
+            },
+            items: [{
+                dataField: 'CustomRange',
+                editorType: 'dxRangeSlider',
+                editorOptions: {
+                    startName: 'RangeStart',
+                    endName: 'RangeEnd'
+                }
+            }]
+        }).dxLayoutManager('instance');
+
+        assert.deepEqual(layoutManager.getEditor('CustomRange').option('startName'), 'RangeStart', 'startName specified correctly');
+        assert.deepEqual(layoutManager.getEditor('CustomRange').option('endName'), 'RangeEnd', 'endName specified correctly');
+    });
+
+    test('RangeSlider inputs should be rendered with predefined name attributes if startName and endName are not specified (T1256743)', function(assert) {
+        const layoutManager = $('#container').dxLayoutManager({
+            layoutData: {
+                range: [10, 20]
+            },
+            items: [{
+                dataField: 'CustomRange',
+                editorType: 'dxRangeSlider'
+            }]
+        }).dxLayoutManager('instance');
+
+        assert.deepEqual(layoutManager.getEditor('CustomRange').option('startName'), 'CustomRangeStart', 'startName specified correctly');
+        assert.deepEqual(layoutManager.getEditor('CustomRange').option('endName'), 'CustomRangeEnd', 'endName specified correctly');
+    });
+
     test('Render DateRangeBox', function(assert) {
         const layoutManager = $('#container').dxLayoutManager({
             layoutData: {
@@ -2710,6 +2744,40 @@ QUnit.module('Supported editors', () => {
         assert.deepEqual(layoutManager.option('layoutData.noRange'), newRangeValue, 'data updated');
     });
 
+    test('DateRangeBox should be rendered with passed name attributes for startDateName and endDateName inputs (T1256743)', function(assert) {
+        const layoutManager = $('#container').dxLayoutManager({
+            layoutData: {
+                range: [new Date(2021, 9, 17), new Date(2021, 9, 25)]
+            },
+            items: [{
+                dataField: 'DateRange',
+                editorType: 'dxDateRangeBox',
+                editorOptions: {
+                    startDateName: 'RangeStart',
+                    endDateName: 'RangeEnd'
+                }
+            }]
+        }).dxLayoutManager('instance');
+
+        assert.deepEqual(layoutManager.getEditor('DateRange').option('startDateName'), 'RangeStart', 'startDateName specified correctly');
+        assert.deepEqual(layoutManager.getEditor('DateRange').option('endDateName'), 'RangeEnd', 'endDateName specified correctly');
+    });
+
+    test('DateRangeBox inputs should be rendered with predefined name attributes if startDateName and endDateName are not specified (T1256743)', function(assert) {
+        const layoutManager = $('#container').dxLayoutManager({
+            layoutData: {
+                range: [new Date(2021, 9, 17), new Date(2021, 9, 25)]
+            },
+            items: [{
+                dataField: 'DateRange',
+                editorType: 'dxDateRangeBox'
+            }]
+        }).dxLayoutManager('instance');
+
+        assert.deepEqual(layoutManager.getEditor('DateRange').option('startDateName'), 'DateRangeStart', 'startDateName specified correctly');
+        assert.deepEqual(layoutManager.getEditor('DateRange').option('endDateName'), 'DateRangeEnd', 'endDateName specified correctly');
+    });
+
     test('Form with dxRadioGroup that items are defined via \'dataSource\' option renders without error', function(assert) {
         const $testContainer = $('#container');
         let errorMessage;