Skip to content

Commit f256f68

Browse files
ksercsmarker-daomarker dao ®
authored
DropDownList: do not load current value on reset method call (T1247576) (#28618)
Co-authored-by: marker dao ® <[email protected]> Co-authored-by: marker dao ® <[email protected]>
1 parent 8f40a1f commit f256f68

File tree

11 files changed

+239
-35
lines changed

11 files changed

+239
-35
lines changed

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

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -265,12 +265,20 @@ const DropDownList = DropDownEditor.inherit({
265265
return DROPDOWNLIST_POPUP_WRAPPER_CLASS;
266266
},
267267

268-
_renderInputValue() {
269-
const value = this._getCurrentValue();
268+
_renderInputValue({ value, renderOnly }: { value?: unknown; renderOnly?: boolean } = {}) {
269+
const currentValue = value ?? this._getCurrentValue();
270270
this._rejectValueLoading();
271271

272-
return this._loadInputValue(value, this._setSelectedItem.bind(this))
273-
.always(this.callBase.bind(this, value));
272+
if (renderOnly) {
273+
return this.callBase(currentValue);
274+
}
275+
276+
return this
277+
._loadInputValue(
278+
currentValue,
279+
(...args) => { this._setSelectedItem(...args); },
280+
)
281+
.always(this.callBase.bind(this, currentValue));
274282
},
275283

276284
_loadInputValue(value, callback) {
@@ -301,6 +309,10 @@ const DropDownList = DropDownEditor.inherit({
301309
return selectedItem;
302310
},
303311

312+
_resetInputText(): void {
313+
this._renderInputValue({ renderOnly: true });
314+
},
315+
304316
_loadItem(value, cache) {
305317
const selectedItem = this._getItemFromPlain(value, cache);
306318

@@ -812,7 +824,9 @@ const DropDownList = DropDownEditor.inherit({
812824
if (this._list) {
813825
delete this._list;
814826
}
827+
815828
delete this._isLastMinSearchLengthExceeded;
829+
816830
this.callBase();
817831
},
818832

‎packages/devextreme/js/__internal/ui/m_drop_down_box.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,12 +101,12 @@ const DropDownBox = (DropDownEditor as any).inherit({
101101
return sortedValues.map((x) => x.itemDisplayValue);
102102
},
103103

104-
_renderInputValue() {
104+
_renderInputValue({ renderOnly }: { renderOnly?: boolean } = {}) {
105105
this._rejectValueLoading();
106106
const values = [];
107107

108108
if (!this._dataSource) {
109-
this.callBase(values);
109+
this.callBase({ renderOnly, value: values });
110110

111111
return Deferred().resolve();
112112
}
@@ -138,7 +138,10 @@ const DropDownBox = (DropDownEditor as any).inherit({
138138
.always(() => {
139139
const orderedValues = this._sortValuesByKeysOrder(keys, values);
140140
this.option('displayValue', orderedValues);
141-
callBase(values.length && orderedValues);
141+
callBase({
142+
renderOnly,
143+
value: values.length && orderedValues,
144+
});
142145
});
143146
},
144147

‎packages/devextreme/js/__internal/ui/m_lookup.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -945,8 +945,8 @@ const Lookup = DropDownList.inherit({
945945
return this.option('searchEnabled') && this._searchBox ? this._searchBox.option('value') : '';
946946
},
947947

948-
_renderInputValue() {
949-
return this.callBase().always(() => {
948+
_renderInputValue(...args) {
949+
return this.callBase(...args).always(() => {
950950
this._refreshSelected();
951951
});
952952
},

‎packages/devextreme/js/__internal/ui/m_select_box.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -287,8 +287,8 @@ const SelectBox = (DropDownList as any).inherit({
287287
return Deferred().resolve();
288288
},
289289

290-
_renderInputValue() {
291-
return this.callBase().always(() => {
290+
_renderInputValue(...args) {
291+
return this.callBase(...args).always(() => {
292292
this._renderInputValueAsync();
293293
});
294294
},

‎packages/devextreme/js/__internal/ui/m_tag_box.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -601,10 +601,10 @@ const TagBox = (SelectBox as any).inherit({
601601
this.callBase(e);
602602
},
603603

604-
_renderInputValue() {
604+
_renderInputValue(...args) {
605605
this.option('displayValue', this._searchValue());
606606

607-
return this.callBase();
607+
return this.callBase(...args);
608608
},
609609

610610
_restoreInputText(saveEditingValue) {

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

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -916,10 +916,22 @@ const TextEditorBase = Editor.inherit({
916916
}
917917
},
918918

919+
_resetInputText(): void {
920+
this._options.silent('text', this._initialValue);
921+
this._renderValue();
922+
},
923+
924+
_isValueEqualToInitial(): boolean {
925+
const { value } = this.option();
926+
const initialValue = this._initialValue;
927+
928+
return value === initialValue;
929+
},
930+
919931
_resetToInitialValue() {
920-
if (this.option('value') === this._initialValue) {
921-
this._options.silent('text', this._initialValue);
922-
this._renderValue();
932+
const shouldResetInputText = this._isValueEqualToInitial();
933+
if (shouldResetInputText) {
934+
this._resetInputText();
923935
} else {
924936
this.callBase();
925937
}

‎packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dateRangeBox.tests.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2615,7 +2615,7 @@ QUnit.module('Validation', {
26152615
assert.strictEqual(this.instance.option('isValid'), true);
26162616
});
26172617

2618-
QUnit.test('reset should clear input value when editor`s value hasn`t been changed', function(assert) {
2618+
QUnit.test('reset should clear input value if editor\'s value has not been changed', function(assert) {
26192619
const initialValue = [null, null];
26202620
this.reinit({ value: initialValue });
26212621

@@ -2625,12 +2625,12 @@ QUnit.module('Validation', {
26252625
const keyboard = keyboardMock($startDateBoxInput);
26262626
keyboard.type('123').press('enter');
26272627

2628-
assert.strictEqual($startDateBoxInput.val(), '123');
2629-
assert.deepEqual(this.instance.option('value'), initialValue);
2628+
assert.strictEqual($startDateBoxInput.val(), '123', 'input value is correct');
2629+
assert.deepEqual(this.instance.option('value'), initialValue, 'value option is equal to initial');
26302630

26312631
this.instance.reset();
26322632

2633-
assert.strictEqual($startDateBoxInput.val(), '');
2633+
assert.strictEqual($startDateBoxInput.val(), '', 'input value is reset');
26342634
});
26352635

26362636
QUnit.test('dateRangeBox should not be re-validated after readOnly option change', function(assert) {

‎packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dropDownList.tests.js‎

Lines changed: 123 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1534,6 +1534,128 @@ QUnit.module('dataSource integration', moduleConfig, function() {
15341534
});
15351535
});
15361536

1537+
QUnit.module('reset method', moduleConfig, () => {
1538+
[true, false].forEach(acceptCustomValue => {
1539+
QUnit.test(`byKey should not be called if value is equal to initial, acceptCustomValue is ${acceptCustomValue} (T1247576)`, function(assert) {
1540+
const byKeyHandler = sinon.spy(key => key);
1541+
const items = ['initial'];
1542+
1543+
const dataSource = new DataSource({
1544+
store: new CustomStore({
1545+
load: () => items,
1546+
byKey: byKeyHandler,
1547+
}),
1548+
});
1549+
1550+
const instance = $('#dropDownList').dxDropDownList({
1551+
acceptCustomValue,
1552+
searchEnabled: false,
1553+
dataSource,
1554+
value: items[0],
1555+
}).dxDropDownList('instance');
1556+
1557+
assert.strictEqual(byKeyHandler.callCount, 1, 'byKey is called once after init');
1558+
1559+
instance.reset();
1560+
1561+
assert.strictEqual(byKeyHandler.callCount, 1, 'byKey is still called once');
1562+
});
1563+
});
1564+
1565+
['acceptCustomValue', 'searchEnabled'].forEach(editingOption => {
1566+
QUnit.test(`reset should restore the input text and text option to the initial value even if the value is NOT changed, ${editingOption}=true`, function(assert) {
1567+
assert.expect(12);
1568+
1569+
const byKeyHandler = sinon.spy(key => key);
1570+
const items = ['initial'];
1571+
const additionalText = 'NEW';
1572+
1573+
const dataSource = new DataSource({
1574+
store: new CustomStore({
1575+
load: () => items,
1576+
byKey: byKeyHandler,
1577+
}),
1578+
});
1579+
1580+
const $element = $('#dropDownList').dxDropDownList({
1581+
acceptCustomValue: false,
1582+
searchEnabled: false,
1583+
[editingOption]: true,
1584+
dataSource,
1585+
valueChangeEvent: 'change',
1586+
value: items[0],
1587+
});
1588+
1589+
const instance = $element.dxDropDownList('instance');
1590+
const $input = $element.find(`.${TEXTEDITOR_INPUT_CLASS}`);
1591+
const keyboard = keyboardMock($input);
1592+
1593+
const assertState = (expectedText, messageComment) => {
1594+
assert.strictEqual($input.val(), expectedText, `input text is "${expectedText}" ${messageComment}`);
1595+
assert.strictEqual(instance.option('text'), expectedText, `text option is "${expectedText}" ${messageComment}`);
1596+
assert.strictEqual(instance.option('value'), items[0], `value option is "${items[0]}" ${messageComment}`);
1597+
assert.strictEqual(byKeyHandler.callCount, 1, 'no additional byKey for initial item is presented');
1598+
};
1599+
1600+
assertState(items[0], 'initially');
1601+
1602+
keyboard.type(additionalText);
1603+
1604+
assertState(`${additionalText}${items[0]}`, 'after typing');
1605+
1606+
instance.reset();
1607+
1608+
assertState(items[0], 'after reset');
1609+
});
1610+
});
1611+
1612+
QUnit.test('reset should restore the input value, value and text options to the initial value if the value is changed, acceptCustomValue=true', function(assert) {
1613+
assert.expect(12);
1614+
1615+
const byKeyHandler = sinon.spy(key => key);
1616+
const items = ['initial'];
1617+
const additionalText = 'NEW';
1618+
let expectedByKeyCallCount = 0;
1619+
1620+
const dataSource = new DataSource({
1621+
store: new CustomStore({
1622+
load: () => items,
1623+
byKey: byKeyHandler,
1624+
}),
1625+
});
1626+
1627+
const $element = $('#dropDownList').dxDropDownList({
1628+
acceptCustomValue: true,
1629+
valueChangeEvent: 'change',
1630+
dataSource,
1631+
value: items[0],
1632+
});
1633+
1634+
const instance = $element.dxDropDownList('instance');
1635+
const $input = $element.find(`.${TEXTEDITOR_INPUT_CLASS}`);
1636+
const keyboard = keyboardMock($input);
1637+
1638+
const assertState = (expectedText, messageComment) => {
1639+
expectedByKeyCallCount++;
1640+
assert.strictEqual($input.val(), expectedText, `input text is "${expectedText}" ${messageComment}`);
1641+
assert.strictEqual(instance.option('text'), expectedText, `text option is "${expectedText}" ${messageComment}`);
1642+
assert.strictEqual(instance.option('value'), expectedText, `value option is "${expectedText}" ${messageComment}`);
1643+
assert.strictEqual(byKeyHandler.callCount, expectedByKeyCallCount, 'byKey call is okay if loading value is not the current value');
1644+
};
1645+
1646+
assertState(items[0], 'initially');
1647+
1648+
keyboard.type(additionalText);
1649+
keyboard.change();
1650+
1651+
assertState(`${additionalText}${items[0]}`, 'after typing');
1652+
1653+
instance.reset();
1654+
1655+
assertState(items[0], 'after reset');
1656+
});
1657+
});
1658+
15371659
QUnit.module('action options', moduleConfig, () => {
15381660
QUnit.test('onItemClick action', function(assert) {
15391661
assert.expect(3);
@@ -1806,8 +1928,7 @@ QUnit.module('dropdownlist with groups', {
18061928
});
18071929
});
18081930

1809-
QUnit.module(
1810-
'data source from url',
1931+
QUnit.module('data source from url',
18111932
{
18121933
afterEach: function() {
18131934
ajaxMock.clear();

‎packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/selectBox.tests.js‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,6 @@ const moduleSetup = {
104104
};
105105

106106
QUnit.module('hidden input', moduleSetup, () => {
107-
108107
QUnit.test('the hidden input should get correct value on widget value change', function(assert) {
109108
const $element = $('#selectBox').dxSelectBox({
110109
items: [1, 2, 3],
@@ -157,7 +156,6 @@ QUnit.module('hidden input', moduleSetup, () => {
157156
});
158157

159158
QUnit.module('functionality', moduleSetup, () => {
160-
161159
QUnit.test('value can be set to "null"', function(assert) {
162160
const $element = $('#selectBox').dxSelectBox({
163161
items: ['first', 'second', 'third'],
@@ -1579,7 +1577,6 @@ QUnit.module('widget options', moduleSetup, () => {
15791577
});
15801578

15811579
QUnit.module('clearButton', moduleSetup, () => {
1582-
15831580
QUnit.test('"clear" button click should not open selectbox', function(assert) {
15841581
const $element = $('#selectBox').dxSelectBox({
15851582
items: [1, 2, 3],
@@ -1757,7 +1754,6 @@ QUnit.module('clearButton', moduleSetup, () => {
17571754
});
17581755

17591756
QUnit.module('showSelectionControls', moduleSetup, () => {
1760-
17611757
QUnit.test('showSelectionControls is true', function(assert) {
17621758
$('#selectBox').dxSelectBox({
17631759
items: [1],
@@ -1788,7 +1784,6 @@ QUnit.module('showSelectionControls', moduleSetup, () => {
17881784
});
17891785

17901786
QUnit.module('editing', moduleSetup, () => {
1791-
17921787
QUnit.test('readOnly option with searchEnabled', function(assert) {
17931788
const $selectBox = $('#selectBox').dxSelectBox({
17941789
items: ['item1', 'item2', 'text3'],
@@ -4195,7 +4190,6 @@ QUnit.module('search substitution', {
41954190
});
41964191
});
41974192

4198-
41994193
QUnit.module('Scrolling', {
42004194
beforeEach: function() {
42014195
fx.off = true;
@@ -4393,7 +4387,6 @@ QUnit.module('Async tests', {}, () => {
43934387
});
43944388

43954389
QUnit.module('regressions', moduleSetup, () => {
4396-
43974390
QUnit.test('dataSource null reference error', function(assert) {
43984391
assert.expect(0);
43994392

@@ -4720,7 +4713,6 @@ QUnit.module('regressions', moduleSetup, () => {
47204713
});
47214714

47224715
QUnit.module('hide on blur', moduleSetup, () => {
4723-
47244716
QUnit.testInActiveWindow('selectbox does not hide self after input blur', function(assert) {
47254717
const $selectBox = $('#selectBoxWithoutScroll').dxSelectBox({
47264718
dataSource: [100, 200, 300]
@@ -5474,7 +5466,6 @@ QUnit.module('keyboard navigation', moduleSetup, () => {
54745466
});
54755467

54765468
QUnit.module('keyboard navigation "TAB" button', moduleSetup, () => {
5477-
54785469
QUnit.test('T309987 - item should not be changed on the "tab" press', function(assert) {
54795470
const items = ['first', 'second'];
54805471
const value = items[1];
@@ -5954,7 +5945,6 @@ QUnit.module('acceptCustomValue mode', moduleSetup, () => {
59545945
});
59555946
});
59565947

5957-
59585948
QUnit.module('focus policy', {
59595949
beforeEach: function() {
59605950
this.clock = sinon.useFakeTimers();
@@ -6523,7 +6513,6 @@ QUnit.module('displayExpr', moduleSetup, () => {
65236513
});
65246514
});
65256515

6526-
65276516
QUnit.module('The "customItemCreateEvent" option warning', {
65286517
beforeEach: function() {
65296518
this.$selectBox = $('#selectBox');

0 commit comments

Comments
 (0)