Skip to content

Commit abdd30e

Browse files
EugeniyKiyashkoEugeniyKiyashko
authored
Form: DropDownBox loses its value after the Form is resized (T1196835) (#28709) (#28720)
1 parent 6ede5fb commit abdd30e

File tree

5 files changed

+162
-42
lines changed

5 files changed

+162
-42
lines changed

‎packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_editor.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import Widget from '@js/ui/widget/ui.widget';
2929
import DropDownButton from './m_drop_down_button';
3030
import { getElementWidth, getSizeValue } from './m_utils';
3131

32-
const DROP_DOWN_EDITOR_CLASS = 'dx-dropdowneditor';
32+
export const DROP_DOWN_EDITOR_CLASS = 'dx-dropdowneditor';
3333
const DROP_DOWN_EDITOR_INPUT_WRAPPER = 'dx-dropdowneditor-input-wrapper';
3434
const DROP_DOWN_EDITOR_BUTTON_ICON = 'dx-dropdowneditor-icon';
3535
const DROP_DOWN_EDITOR_OVERLAY = 'dx-dropdowneditor-overlay';

‎packages/devextreme/js/__internal/ui/form/m_form.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,10 @@ import TabPanel from '@js/ui/tab_panel';
2626
import { isMaterial, isMaterialBased } from '@js/ui/themes';
2727
import ValidationEngine from '@js/ui/validation_engine';
2828
import Widget from '@js/ui/widget/ui.widget';
29+
import { DROP_DOWN_EDITOR_CLASS } from '@ts/ui/drop_down_editor/m_drop_down_editor';
2930
import { TOOLBAR_CLASS } from '@ts/ui/toolbar/m_constants';
3031

32+
import { TEXTEDITOR_CLASS, TEXTEDITOR_INPUT_CLASS } from '../text_box/m_text_editor.base';
3133
import {
3234
setLabelWidthByMaxLabelWidth,
3335
} from './components/m_label';
@@ -67,7 +69,6 @@ import {
6769
} from './m_form.utils';
6870

6971
const FOCUSED_STATE_CLASS = 'dx-state-focused';
70-
7172
const ITEM_OPTIONS_FOR_VALIDATION_UPDATING = ['items', 'isRequired', 'validationRules', 'visible'];
7273

7374
// @ts-expect-error
@@ -1201,9 +1202,7 @@ const Form = Widget.inherit({
12011202
},
12021203

12031204
_refresh() {
1204-
const editorSelector = `.${FOCUSED_STATE_CLASS} > :not(.dx-dropdowneditor-input-wrapper) input,`
1205-
+ ` .${FOCUSED_STATE_CLASS} textarea`;
1206-
1205+
const editorSelector = `.${TEXTEDITOR_CLASS}.${FOCUSED_STATE_CLASS}:not(.${DROP_DOWN_EDITOR_CLASS}) .${TEXTEDITOR_INPUT_CLASS}`;
12071206
// @ts-expect-error
12081207
eventsEngine.trigger(this.$element().find(editorSelector), 'change');
12091208

‎packages/devextreme/js/__internal/ui/tab_panel/m_tab_panel.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { current as currentTheme, isFluent, isMaterialBased } from '@js/ui/theme
1515
// eslint-disable-next-line import/no-named-default
1616
import { default as TabPanelItem } from './m_item';
1717

18-
const TABPANEL_CLASS = 'dx-tabpanel';
18+
export const TABPANEL_CLASS = 'dx-tabpanel';
1919
const TABPANEL_TABS_CLASS = 'dx-tabpanel-tabs';
2020
const TABPANEL_TABS_ITEM_CLASS = 'dx-tabpanel-tab';
2121
const TABPANEL_CONTAINER_CLASS = 'dx-tabpanel-container';

‎packages/devextreme/js/__internal/ui/text_box/m_text_editor.base.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ import ClearButton from './m_text_editor.clear';
2222
import { TextEditorLabel } from './m_text_editor.label';
2323
import TextEditorButtonCollection from './texteditor_button_collection/m_index';
2424

25-
const TEXTEDITOR_CLASS = 'dx-texteditor';
25+
export const TEXTEDITOR_CLASS = 'dx-texteditor';
2626
const TEXTEDITOR_INPUT_CONTAINER_CLASS = 'dx-texteditor-input-container';
27-
const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
27+
export const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
2828
const TEXTEDITOR_INPUT_SELECTOR = `.${TEXTEDITOR_INPUT_CLASS}`;
2929
const TEXTEDITOR_CONTAINER_CLASS = 'dx-texteditor-container';
3030
const TEXTEDITOR_BUTTONS_CONTAINER_CLASS = 'dx-texteditor-buttons-container';

‎packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.tests.js‎

Lines changed: 155 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ import 'ui/range_slider';
2020
import windowModule from 'core/utils/window';
2121
import Form from 'ui/form';
2222
import TextEditorBase from 'ui/text_box/ui.text_editor.base.js';
23+
import {
24+
TEXTEDITOR_INPUT_CLASS
25+
} from '__internal/ui/text_box/m_text_editor.base';
26+
2327

2428
import {
2529
FIELD_ITEM_CLASS,
@@ -57,6 +61,7 @@ import themes from 'ui/themes';
5761
import registerKeyHandlerTestHelper from '../../helpers/registerKeyHandlerTestHelper.js';
5862
import responsiveBoxScreenMock from '../../helpers/responsiveBoxScreenMock.js';
5963
import { isDefined } from 'core/utils/type.js';
64+
import { TABPANEL_CLASS } from '__internal/ui/tab_panel/m_tab_panel';
6065

6166
const INVALID_CLASS = 'dx-invalid';
6267
const FORM_GROUP_CONTENT_CLASS = 'dx-form-group-content';
@@ -95,9 +100,9 @@ if(device.current().deviceType === 'desktop') {
95100
});
96101
}
97102

98-
QUnit.testInActiveWindow('Form\'s inputs saves value on refresh', function(assert) {
103+
QUnit.testInActiveWindow('Form\'s textbox input saves value on refresh (T404958)', function(assert) {
99104
let screen = 'md';
100-
const $formContainer = $('#form').dxForm({
105+
const $form = $('#form').dxForm({
101106
screenByWidth: function() {
102107
return screen;
103108
},
@@ -113,17 +118,48 @@ QUnit.testInActiveWindow('Form\'s inputs saves value on refresh', function(asser
113118
]
114119
});
115120

116-
$('#form input')
121+
$form.find(`.${TEXTEDITOR_INPUT_CLASS}`)
117122
.first()
118123
.focus()
119124
.val('test');
120125

121126
screen = 'sm';
122127
resizeCallbacks.fire();
123128

124-
const formData = $formContainer.dxForm('instance').option('formData');
129+
const formData = $form.dxForm('instance').option('formData');
125130

126-
assert.deepEqual(formData, { name: 'test' }, 'value updates');
131+
assert.deepEqual(formData, { name: 'test' }, 'textbox value updates');
132+
});
133+
134+
QUnit.testInActiveWindow('Form\'s textarea input saves value on refresh (T404958)', function(assert) {
135+
let screen = 'md';
136+
const $form = $('#form').dxForm({
137+
screenByWidth: function() {
138+
return screen;
139+
},
140+
colCountByScreen: {
141+
sm: 1,
142+
md: 2
143+
},
144+
items: [
145+
{
146+
dataField: 'name',
147+
editorType: 'dxTextArea'
148+
}
149+
]
150+
});
151+
152+
$form.find(`.${TEXTEDITOR_INPUT_CLASS}`)
153+
.first()
154+
.focus()
155+
.val('test');
156+
157+
screen = 'sm';
158+
resizeCallbacks.fire();
159+
160+
const formData = $form.dxForm('instance').option('formData');
161+
162+
assert.deepEqual(formData, { name: 'test' }, 'textarea value updates');
127163
});
128164

129165
QUnit.test('Check field width on render form with colspan', function(assert) {
@@ -4916,39 +4952,124 @@ QUnit.module('reset', () => {
49164952
assert.strictEqual(summaryItemsAfterValidate.length, 2, 'form has validation summary after validation');
49174953
});
49184954

4919-
QUnit.test('DropDownBox should not lose its value if form resized (T1196835)', function(assert) {
4920-
let screen = 'lg';
4921-
4922-
const value = 'VINET';
4923-
const text = 'Vins et alcools Chevalier (France)';
4924-
const $form = $('#form').dxForm({
4925-
formData: { CustomerID: value },
4926-
screenByWidth: function() { return screen; },
4927-
colCountByScreen: {
4928-
sm: 1,
4929-
lg: 2
4930-
},
4931-
items: [
4932-
{
4933-
itemType: 'simple',
4934-
cssClass: 'test-ddbox',
4935-
dataField: 'CustomerID',
4936-
editorOptions: {
4937-
displayExpr: 'Text',
4938-
valueExpr: 'Value',
4939-
showClearButton: true,
4940-
dataSource: [{ Value: value, Text: text }],
4955+
[
4956+
'dxSelectBox',
4957+
'dxDropDownBox'
4958+
].forEach((editorType) => {
4959+
QUnit.test(`Focused ${editorType} should not lose its value when the form is resized (T1196835)`, function(assert) {
4960+
let screen = 'lg';
4961+
4962+
const name = 'VINET';
4963+
const value = 'Vins et alcools Chevalier (France)';
4964+
const form = $('#form').dxForm({
4965+
formData: { name: name },
4966+
screenByWidth: function() { return screen; },
4967+
colCountByScreen: {
4968+
sm: 1,
4969+
lg: 2
4970+
},
4971+
items: [
4972+
{
4973+
itemType: 'simple',
4974+
dataField: 'name',
4975+
editorOptions: {
4976+
displayExpr: 'Text',
4977+
valueExpr: 'Value',
4978+
showClearButton: true,
4979+
dataSource: [{ Value: name, Text: value }],
4980+
},
4981+
editorType,
49414982
},
4942-
editorType: 'dxDropDownBox',
4983+
]
4984+
}).dxForm('instance');
4985+
4986+
const dropDownEditor = form.getEditor('name');
4987+
4988+
screen = 'sm';
4989+
dropDownEditor.focus();
4990+
resizeCallbacks.fire();
4991+
4992+
assert.strictEqual($(form.getEditor('name').field()).val(), value, `${editorType} contains expected value`);
4993+
});
4994+
4995+
QUnit.test(`Focused ${editorType} inside a tabbed item should not lose its value when the form is resized (T1196835)`, function(assert) {
4996+
let screen = 'lg';
4997+
4998+
const name = 'VINET';
4999+
const value = 'Vins et alcools Chevalier (France)';
5000+
const form = $('#form').dxForm({
5001+
formData: { name: name },
5002+
screenByWidth: function() { return screen; },
5003+
colCountByScreen: {
5004+
sm: 1,
5005+
lg: 2
49435006
},
4944-
]
5007+
items: [{
5008+
itemType: 'tabbed',
5009+
tabs: [{
5010+
title: 'Phone',
5011+
colCount: 1,
5012+
items: [{
5013+
itemType: 'simple',
5014+
dataField: 'name',
5015+
editorOptions: {
5016+
displayExpr: 'Text',
5017+
valueExpr: 'Value',
5018+
showClearButton: true,
5019+
dataSource: [{ Value: name, Text: value }],
5020+
},
5021+
editorType,
5022+
}],
5023+
}],
5024+
}],
5025+
}).dxForm('instance');
5026+
5027+
const dropDownEditor = form.getEditor('name');
5028+
5029+
screen = 'sm';
5030+
dropDownEditor.focus();
5031+
resizeCallbacks.fire();
5032+
5033+
assert.strictEqual($(form.getEditor('name').field()).val(), value, `${editorType} contains expected value`);
49455034
});
4946-
const $input = $form.find(`.test-ddbox .${EDITOR_INPUT_CLASS}`);
49475035

4948-
screen = 'sm';
4949-
$input.focus();
4950-
resizeCallbacks.fire();
5036+
QUnit.test(`${editorType} inside a tabbed item and focused tab should not lose its value when the form is resized (T1196835)`, function(assert) {
5037+
let screen = 'lg';
49515038

4952-
assert.strictEqual($input.val(), text, 'ddBox contain correct value');
5039+
const name = 'VINET';
5040+
const value = 'Vins et alcools Chevalier (France)';
5041+
const form = $('#form').dxForm({
5042+
formData: { name: name },
5043+
screenByWidth: function() { return screen; },
5044+
colCountByScreen: {
5045+
sm: 1,
5046+
lg: 2
5047+
},
5048+
items: [{
5049+
itemType: 'tabbed',
5050+
tabs: [{
5051+
title: 'Phone',
5052+
colCount: 1,
5053+
items: [{
5054+
itemType: 'simple',
5055+
dataField: 'name',
5056+
editorOptions: {
5057+
displayExpr: 'Text',
5058+
valueExpr: 'Value',
5059+
showClearButton: true,
5060+
dataSource: [{ Value: name, Text: value }],
5061+
},
5062+
editorType,
5063+
}],
5064+
}],
5065+
}],
5066+
}).dxForm('instance');
5067+
5068+
screen = 'sm';
5069+
$(form.element()).find(`.${TABPANEL_CLASS}`).focus();
5070+
resizeCallbacks.fire();
5071+
5072+
assert.strictEqual($(form.getEditor('name').field()).val(), value, `${editorType} contains expected value`);
5073+
});
49535074
});
49545075
});

0 commit comments

Comments
 (0)