Skip to content

Commit

Permalink
Form: DropDownBox loses its value after the Form is resized (T1196835) (
Browse files Browse the repository at this point in the history
  • Loading branch information
EugeniyKiyashko committed Jan 15, 2025
1 parent fa8de13 commit 2356e51
Show file tree
Hide file tree
Showing 2 changed files with 156 additions and 36 deletions.
6 changes: 4 additions & 2 deletions js/ui/form/ui.form.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,9 @@ import {
import { TOOLBAR_CLASS } from '../toolbar/constants';

const FOCUSED_STATE_CLASS = 'dx-state-focused';
const TEXTEDITOR_CLASS = 'dx-texteditor';
const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
const DROP_DOWN_EDITOR_CLASS = 'dx-dropdowneditor';

const ITEM_OPTIONS_FOR_VALIDATION_UPDATING = ['items', 'isRequired', 'validationRules', 'visible'];

Expand Down Expand Up @@ -1127,8 +1130,7 @@ const Form = Widget.inherit({
},

_refresh: function() {
const editorSelector = `.${FOCUSED_STATE_CLASS} > :not(.dx-dropdowneditor-input-wrapper) input,`
+ ` .${FOCUSED_STATE_CLASS} textarea`;
const editorSelector = `.${TEXTEDITOR_CLASS}.${FOCUSED_STATE_CLASS}:not(.${DROP_DOWN_EDITOR_CLASS}) .${TEXTEDITOR_INPUT_CLASS}`;

eventsEngine.trigger(this.$element().find(editorSelector), 'change');

Expand Down
186 changes: 152 additions & 34 deletions testing/tests/DevExpress.ui.widgets.form/form.tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,8 @@ import responsiveBoxScreenMock from '../../helpers/responsiveBoxScreenMock.js';
import { isDefined } from 'core/utils/type.js';

const INVALID_CLASS = 'dx-invalid';
const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
const TABPANEL_CLASS = 'dx-tabpanel';
const FORM_GROUP_CONTENT_CLASS = 'dx-form-group-content';
const MULTIVIEW_ITEM_CONTENT_CLASS = 'dx-multiview-item-content';
const LAST_COL_CLASS = 'dx-last-col';
Expand Down Expand Up @@ -89,9 +91,9 @@ if(device.current().deviceType === 'desktop') {
});
}

QUnit.testInActiveWindow('Form\'s inputs saves value on refresh', function(assert) {
QUnit.testInActiveWindow('Form\'s textbox input saves value on refresh (T404958)', function(assert) {
let screen = 'md';
const $formContainer = $('#form').dxForm({
const $form = $('#form').dxForm({
screenByWidth: function() {
return screen;
},
Expand All @@ -107,17 +109,48 @@ QUnit.testInActiveWindow('Form\'s inputs saves value on refresh', function(asser
]
});

$('#form input')
$form.find(`.${TEXTEDITOR_INPUT_CLASS}`)
.first()
.focus()
.val('test');

screen = 'sm';
resizeCallbacks.fire();

const formData = $formContainer.dxForm('instance').option('formData');
const formData = $form.dxForm('instance').option('formData');

assert.deepEqual(formData, { name: 'test' }, 'value updates');
assert.deepEqual(formData, { name: 'test' }, 'textbox value updates');
});

QUnit.testInActiveWindow('Form\'s textarea input saves value on refresh (T404958)', function(assert) {
let screen = 'md';
const $form = $('#form').dxForm({
screenByWidth: function() {
return screen;
},
colCountByScreen: {
sm: 1,
md: 2
},
items: [
{
dataField: 'name',
editorType: 'dxTextArea'
}
]
});

$form.find(`.${TEXTEDITOR_INPUT_CLASS}`)
.first()
.focus()
.val('test');

screen = 'sm';
resizeCallbacks.fire();

const formData = $form.dxForm('instance').option('formData');

assert.deepEqual(formData, { name: 'test' }, 'textarea value updates');
});

QUnit.test('Check field width on render form with colspan', function(assert) {
Expand Down Expand Up @@ -4381,38 +4414,123 @@ QUnit.test('TagBox.SelectionChanged is raised once if formData is wrapped into a
assert.strictEqual(onSelectionChangedCounter, 1, 'onSelectionChangedCounter');
});

QUnit.test('DropDownBox should not lose its value if form resized (T1196835)', function(assert) {
let screen = 'lg';

const value = 'VINET';
const text = 'Vins et alcools Chevalier (France)';
const $form = $('#form').dxForm({
formData: { CustomerID: value },
screenByWidth: function() { return screen; },
colCountByScreen: {
sm: 1,
lg: 2
},
items: [
{
itemType: 'simple',
cssClass: 'test-ddbox',
dataField: 'CustomerID',
editorOptions: {
displayExpr: 'Text',
valueExpr: 'Value',
showClearButton: true,
dataSource: [{ Value: value, Text: text }],
[
'dxSelectBox',
'dxDropDownBox'
].forEach((editorType) => {
QUnit.testInActiveWindow(`Focused ${editorType} should not lose its value when the form is resized (T1196835)`, function(assert) {
let screen = 'lg';

const name = 'VINET';
const value = 'Vins et alcools Chevalier (France)';
const form = $('#form').dxForm({
formData: { name: name },
screenByWidth: function() { return screen; },
colCountByScreen: {
sm: 1,
lg: 2
},
items: [
{
itemType: 'simple',
dataField: 'name',
editorOptions: {
displayExpr: 'Text',
valueExpr: 'Value',
showClearButton: true,
dataSource: [{ Value: name, Text: value }],
},
editorType,
},
editorType: 'dxDropDownBox',
]
}).dxForm('instance');

const dropDownEditor = form.getEditor('name');

screen = 'sm';
dropDownEditor.focus();
resizeCallbacks.fire();

assert.strictEqual($(form.getEditor('name').field()).val(), value, `${editorType} contains expected value`);
});

QUnit.testInActiveWindow(`Focused ${editorType} inside a tabbed item should not lose its value when the form is resized (T1196835)`, function(assert) {
let screen = 'lg';

const name = 'VINET';
const value = 'Vins et alcools Chevalier (France)';
const form = $('#form').dxForm({
formData: { name: name },
screenByWidth: function() { return screen; },
colCountByScreen: {
sm: 1,
lg: 2
},
]
items: [{
itemType: 'tabbed',
tabs: [{
title: 'Phone',
colCount: 1,
items: [{
itemType: 'simple',
dataField: 'name',
editorOptions: {
displayExpr: 'Text',
valueExpr: 'Value',
showClearButton: true,
dataSource: [{ Value: name, Text: value }],
},
editorType,
}],
}],
}],
}).dxForm('instance');

const dropDownEditor = form.getEditor('name');

screen = 'sm';
dropDownEditor.focus();
resizeCallbacks.fire();

assert.strictEqual($(form.getEditor('name').field()).val(), value, `${editorType} contains expected value`);
});
const $input = $form.find(`.test-ddbox .${EDITOR_INPUT_CLASS}`);

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

assert.strictEqual($input.val(), text, 'ddBox contain correct value');
const name = 'VINET';
const value = 'Vins et alcools Chevalier (France)';
const form = $('#form').dxForm({
formData: { name: name },
screenByWidth: function() { return screen; },
colCountByScreen: {
sm: 1,
lg: 2
},
items: [{
itemType: 'tabbed',
tabs: [{
title: 'Phone',
colCount: 1,
items: [{
itemType: 'simple',
dataField: 'name',
editorOptions: {
displayExpr: 'Text',
valueExpr: 'Value',
showClearButton: true,
dataSource: [{ Value: name, Text: value }],
},
editorType,
}],
}],
}],
}).dxForm('instance');

screen = 'sm';
$(form.element()).find(`.${TABPANEL_CLASS}`).focus();
resizeCallbacks.fire();

assert.strictEqual($(form.getEditor('name').field()).val(), value, `${editorType} contains expected value`);
});
});

0 comments on commit 2356e51

Please sign in to comment.