Skip to content

Commit da51393

Browse files
pharret31pharret31
authored
Form: fields should not exceed group column width when many items are selected (T1326645) (#33268)
1 parent 1b40023 commit da51393

File tree

2 files changed

+66
-22
lines changed

2 files changed

+66
-22
lines changed

‎packages/devextreme-scss/scss/widgets/base/_form.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
.dx-field-item-content {
8181
vertical-align: top;
8282

83-
// TODO: form layout manager should not contains settings with checkbox/switch classes
83+
// TODO: form layout manager should not contain settings with checkbox/switch classes
8484
.dx-checkbox,
8585
.dx-switch {
8686
margin-top: 7px;
@@ -91,6 +91,7 @@
9191
.dx-field-item-content,
9292
.dx-field-item-content-wrapper {
9393
width: 100%;
94+
min-width: 0;
9495
}
9596
}
9697

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

Lines changed: 64 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@ import responsiveBoxScreenMock from '../../helpers/responsiveBoxScreenMock.js';
55
import { isRenderer } from 'core/utils/type';
66
import config from 'core/config';
77
import 'ui/form';
8-
import { FIELD_ITEM_CLASS,
8+
import {
99
FORM_CLASS,
1010
FORM_FIELD_ITEM_COL_CLASS,
1111
FORM_GROUP_CLASS,
12+
FIELD_ITEM_CLASS,
13+
FIELD_ITEM_LABEL_CLASS,
1214
FIELD_ITEM_CONTENT_CLASS,
1315
FIELD_ITEM_LABEL_CONTENT_CLASS,
1416
FORM_GROUP_CAPTION_CLASS,
@@ -24,6 +26,9 @@ import ValidationEngine from 'ui/validation_engine';
2426
import 'ui/text_area';
2527
import 'ui/radio_group';
2628
import 'ui/switch';
29+
import 'ui/tag_box';
30+
31+
import 'fluent_blue_light.css!';
2732

2833
const FORM_GROUP_CONTENT_CLASS = 'dx-form-group-content';
2934
const FORM_GROUP_CUSTOM_CAPTION_CLASS = 'dx-form-group-custom-caption';
@@ -142,7 +147,7 @@ QUnit.module('Form', () => {
142147
assert.equal(rootLayoutManager.option('width'), 100, 'Correct width');
143148
});
144149

145-
test('Form isn\'t refresh on dimension changed if colCount is auto', function(assert) {
150+
test('Form should not refresh on dimension changed if colCount is auto', function(assert) {
146151
const $formContainer = $('#form').dxForm({
147152
colCount: 'auto',
148153
items: [
@@ -157,10 +162,10 @@ QUnit.module('Form', () => {
157162

158163
resizeCallbacks.fire();
159164

160-
assert.equal(refreshStub.callCount, 0, 'don\'t refresh on resize if colCount is auto');
165+
assert.equal(refreshStub.callCount, 0, 'did not refresh on resize if colCount is auto');
161166
});
162167

163-
test('Form doesn\'t refresh on dimension changed if colCount is not auto', function(assert) {
168+
test('Form should not refresh on dimension changed if colCount is not auto', function(assert) {
164169
const $formContainer = $('#form').dxForm({
165170
items: [
166171
{
@@ -175,7 +180,7 @@ QUnit.module('Form', () => {
175180

176181
resizeCallbacks.fire();
177182

178-
assert.equal(refreshStub.callCount, 0, 'do not refresh on resize if colCount isn\'t auto');
183+
assert.equal(refreshStub.callCount, 0, 'did not refresh on resize if colCount is not auto');
179184
});
180185

181186
test('Render read only form', function(assert) {
@@ -217,7 +222,7 @@ QUnit.module('Form', () => {
217222
assert.equal($fieldItems.length, 5, '4 simple items + 1 group item');
218223
});
219224

220-
test('\'readOnly\' is changed in inner components on optionChanged', function(assert) {
225+
test('readOnly option is changed in inner components on optionChanged', function(assert) {
221226
const $formContainer = $('#form').dxForm({
222227
items: [
223228
{
@@ -227,7 +232,7 @@ QUnit.module('Form', () => {
227232
]
228233
});
229234

230-
assert.notOk($formContainer.find(`.${FIELD_ITEM_CLASS} .${TEXTEDITOR_CLASS}`).hasClass(READONLY_STATE_CLASS), 'editor isn\'t read only');
235+
assert.notOk($formContainer.find(`.${FIELD_ITEM_CLASS} .${TEXTEDITOR_CLASS}`).hasClass(READONLY_STATE_CLASS), 'editor is not read only');
231236

232237
$formContainer.dxForm('instance').option('readOnly', true);
233238

@@ -250,7 +255,7 @@ QUnit.module('Form', () => {
250255
assert.ok($testContainer.find(`.${FIELD_ITEM_CLASS} .${TEXTEDITOR_CLASS}`).hasClass(READONLY_STATE_CLASS), 'editor is read only');
251256
});
252257

253-
test('\'disable\' is changed in inner components on optionChanged', function(assert) {
258+
test('disable option is changed in inner components on optionChanged', function(assert) {
254259
const $formContainer = $('#form').dxForm({
255260
items: [
256261
{
@@ -265,7 +270,7 @@ QUnit.module('Form', () => {
265270

266271
$formContainer.dxForm('instance').option('disabled', false);
267272

268-
assert.notOk($formContainer.find(`.${FIELD_ITEM_CLASS} .${TEXTEDITOR_CLASS}`).hasClass('dx-state-disabled'), 'editor isn\'t disabled');
273+
assert.notOk($formContainer.find(`.${FIELD_ITEM_CLASS} .${TEXTEDITOR_CLASS}`).hasClass('dx-state-disabled'), 'editor is not disabled');
269274
});
270275

271276
test('Customize item event', function(assert) {
@@ -335,7 +340,7 @@ QUnit.module('Form', () => {
335340
assert.deepEqual($testContainer.find('.dx-layout-manager').dxLayoutManager('instance').option('layoutData'), { FamousPirate: 'John Morgan' }, 'Correct formData');
336341
});
337342

338-
test('Check data at render with items and change widget\'s value', function(assert) {
343+
test('Check data at render with items and change widget value', function(assert) {
339344
const $testContainer = $('#form');
340345

341346
$testContainer.dxForm({
@@ -348,7 +353,7 @@ QUnit.module('Form', () => {
348353
assert.deepEqual($testContainer.dxForm('instance').option('formData'), { FamousPirate: 'John Morgan', FamousDetective: 'Sherlock Holmes' }, 'Correct formData');
349354
});
350355

351-
test('Change of editor\'s value changing \'formData\' option', function(assert) {
356+
test('Change of editor value changing formData option', function(assert) {
352357
const $testContainer = $('#form');
353358

354359
$testContainer.dxForm({
@@ -360,7 +365,7 @@ QUnit.module('Form', () => {
360365
assert.deepEqual($testContainer.dxForm('instance').option('formData'), { FamousPirate: 'Cpt. Jack Sparrow' }, 'Correct formData');
361366
});
362367

363-
test('Update of editor\'s value when formOption is changed and items is defined', function(assert) {
368+
test('Update of editor value when formOption is changed and items is defined', function(assert) {
364369
const $testContainer = $('#form');
365370
const textBoxes = [];
366371

@@ -710,7 +715,7 @@ QUnit.module('Form', () => {
710715
assert.equal($editors.eq(1).dxTextBox('option', 'validationBoundary'), undefined);
711716
});
712717

713-
test('button item should have a Form\'s validation group by default', function(assert) {
718+
test('button item should have a Form validation group by default', function(assert) {
714719
const $testContainer = $('#form');
715720
const form = $testContainer.dxForm({
716721
items: [{
@@ -791,6 +796,44 @@ QUnit.module('Form', () => {
791796

792797
assert.equal(templateStub.getCall(0).args[0].name, undefined, 'name argument');
793798
});
799+
800+
test('TagBox should not exceed group column width when many items are selected (T1326645)', function(assert) {
801+
const $form = $('#form').width(600);
802+
803+
$form.dxForm({
804+
labelLocation: 'left',
805+
formData: {
806+
tags: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
807+
},
808+
items: [
809+
{
810+
itemType: 'group',
811+
items: [{
812+
dataField: 'tags',
813+
editorType: 'dxTagBox',
814+
editorOptions: {
815+
items: Array.from({ length: 10 }, (_, i) => ({
816+
id: i + 1,
817+
name: `Long item name ${i + 1}`,
818+
})),
819+
displayExpr: 'name',
820+
valueExpr: 'id',
821+
multiline: false,
822+
},
823+
}],
824+
},
825+
],
826+
});
827+
828+
const $group = $form.find(`.${FORM_GROUP_CLASS}`).first();
829+
const $label = $group.find(`.${FIELD_ITEM_LABEL_CLASS}`).first();
830+
const $content = $group.find(`.${FIELD_ITEM_CONTENT_CLASS}`).first();
831+
832+
const groupWidth = $group.outerWidth();
833+
const totalItemWidth = $label.outerWidth() + $content.outerWidth();
834+
835+
assert.roughEqual(totalItemWidth, groupWidth, 0.1, `field item content width (${totalItemWidth}) should not exceed group width (${groupWidth})`);
836+
});
794837
});
795838

796839
QUnit.module(`"${TOGGLE_CONTROLS_PADDING_CLASS}" class`, ()=>{
@@ -990,7 +1033,7 @@ QUnit.module('Validation group', () => {
9901033

9911034
assert.equal($validator.length, 1, 'validators count');
9921035
assert.equal(validator.option('validationGroup'), form, 'validation group of the validator');
993-
assert.ok(ValidationEngine.getGroupConfig(form), 'form\'s validation group in the validation engine');
1036+
assert.ok(ValidationEngine.getGroupConfig(form), 'form validation group in the validation engine');
9941037
});
9951038

9961039
test('Set { items: [{dataField: name, isRequired: true}], showValidationSummary: true }', function(assert) {
@@ -1016,7 +1059,7 @@ QUnit.module('Validation group', () => {
10161059

10171060
assert.equal($validator.length, 1, 'validators count');
10181061
assert.equal(validator.option('validationGroup'), 'Test', 'validation group of the validator');
1019-
assert.ok(ValidationEngine.getGroupConfig('Test'), 'form\'s validation group in the validation engine');
1062+
assert.ok(ValidationEngine.getGroupConfig('Test'), 'form validation group in the validation engine');
10201063
});
10211064

10221065
test('Set { items: [{dataField: name, isRequired: true}], validationGroup: Test, showValidationSummary: true }', function(assert) {
@@ -1040,7 +1083,7 @@ QUnit.module('Validation group', () => {
10401083
const $validator = $formContainer.find(`.${VALIDATOR_CLASS}`);
10411084

10421085
assert.equal($validator.length, 0, 'validators count');
1043-
assert.ok(ValidationEngine.getGroupConfig(form), 'form\'s validation group in the validation engine');
1086+
assert.ok(ValidationEngine.getGroupConfig(form), 'form validation group in the validation engine');
10441087
});
10451088

10461089
test('Set { items: [{dataField: name}], showValidationSummary: true }', function(assert) {
@@ -1064,7 +1107,7 @@ QUnit.module('Validation group', () => {
10641107
const $validator = $formContainer.find(`.${VALIDATOR_CLASS}`);
10651108

10661109
assert.equal($validator.length, 0, 'validators count');
1067-
assert.ok(ValidationEngine.getGroupConfig('Test'), 'form\'s validation group in the validation engine');
1110+
assert.ok(ValidationEngine.getGroupConfig('Test'), 'form validation group in the validation engine');
10681111
});
10691112

10701113
test('Set { items: [{dataField: name}], validationGroup: Test, showValidationSummary: true }', function(assert) {
@@ -1270,7 +1313,7 @@ QUnit.module('Grouping', () => {
12701313
assert.equal($captions.eq(0).text(), 'Personal');
12711314
});
12721315

1273-
test('helpText element didn\'t render for group item', function(assert) {
1316+
test('helpText element should not be rendered for group item', function(assert) {
12741317
const $formContainer = $('#form').dxForm({
12751318
formData: {
12761319
firstName: 'John'
@@ -1328,7 +1371,7 @@ QUnit.module('Grouping', () => {
13281371

13291372
assert.equal($groups.length, 2, '2 groups rendered');
13301373
assert.equal($groups.eq(1).find('.template-biography').length, 1, 'We have template content');
1331-
assert.equal($groups.eq(1).find('.template-biography').text(), 'bla-bla-bla', 'Template\'s content has correct data');
1374+
assert.equal($groups.eq(1).find('.template-biography').text(), 'bla-bla-bla', 'Template content has correct data');
13321375
});
13331376

13341377
test('Simple Item labelTemplate', function(assert) {
@@ -1363,7 +1406,7 @@ QUnit.module('Grouping', () => {
13631406

13641407
assert.strictEqual($groups.length, 2, '2 groups rendered');
13651408
assert.strictEqual($groups.eq(0).find(`.${labelClass}`).length, 1, 'label template content');
1366-
assert.strictEqual($groups.eq(0).find(`.${labelClass}`).text(), 'First Name: ?', 'Labels\'s content has correct data');
1409+
assert.strictEqual($groups.eq(0).find(`.${labelClass}`).text(), 'First Name: ?', 'Label content has correct data');
13671410
});
13681411

13691412
QUnit.module('Caption template', () => {
@@ -1497,7 +1540,7 @@ QUnit.module('Grouping', () => {
14971540
]
14981541
});
14991542

1500-
assert.equal(templateOwnerComponent, 'dxForm', 'Template\'s data.component is \'dxForm\'');
1543+
assert.equal(templateOwnerComponent, 'dxForm', 'Template data.component is dxForm');
15011544
});
15021545

15031546
test('Recursive grouping', function(assert) {

0 commit comments

Comments
 (0)