Skip to content

Commit eab637b

Browse files
marker-daomarker dao ®ksercs
authored
DropDownList: do not load current value on reset method call (T1247576) (#28575)
Co-authored-by: marker dao ® <[email protected]> Co-authored-by: ksercs <[email protected]>
1 parent 4c2eb72 commit eab637b

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
@@ -264,12 +264,20 @@ const DropDownList = DropDownEditor.inherit({
264264
return DROPDOWNLIST_POPUP_WRAPPER_CLASS;
265265
},
266266

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

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

275283
_loadInputValue(value, callback) {
@@ -300,6 +308,10 @@ const DropDownList = DropDownEditor.inherit({
300308
return selectedItem;
301309
},
302310

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

@@ -813,7 +825,9 @@ const DropDownList = DropDownEditor.inherit({
813825
if (this._list) {
814826
delete this._list;
815827
}
828+
816829
delete this._isLastMinSearchLengthExceeded;
830+
817831
this.callBase();
818832
},
819833

‎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
@@ -973,8 +973,8 @@ const Lookup = DropDownList.inherit({
973973
return this.option('searchEnabled') && this._searchBox ? this._searchBox.option('value') : '';
974974
},
975975

976-
_renderInputValue() {
977-
return this.callBase().always(() => {
976+
_renderInputValue(...args) {
977+
return this.callBase(...args).always(() => {
978978
this._refreshSelected();
979979
});
980980
},

‎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
@@ -600,10 +600,10 @@ const TagBox = (SelectBox as any).inherit({
600600
this.callBase(e);
601601
},
602602

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

606-
return this.callBase();
606+
return this.callBase(...args);
607607
},
608608

609609
_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
@@ -915,10 +915,22 @@ const TextEditorBase = Editor.inherit({
915915
}
916916
},
917917

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

‎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;
@@ -4428,7 +4422,6 @@ QUnit.module('Async tests', {}, () => {
44284422
});
44294423

44304424
QUnit.module('regressions', moduleSetup, () => {
4431-
44324425
QUnit.test('dataSource null reference error', function(assert) {
44334426
assert.expect(0);
44344427

@@ -4755,7 +4748,6 @@ QUnit.module('regressions', moduleSetup, () => {
47554748
});
47564749

47574750
QUnit.module('hide on blur', moduleSetup, () => {
4758-
47594751
QUnit.testInActiveWindow('selectbox does not hide self after input blur', function(assert) {
47604752
const $selectBox = $('#selectBoxWithoutScroll').dxSelectBox({
47614753
dataSource: [100, 200, 300]
@@ -5509,7 +5501,6 @@ QUnit.module('keyboard navigation', moduleSetup, () => {
55095501
});
55105502

55115503
QUnit.module('keyboard navigation "TAB" button', moduleSetup, () => {
5512-
55135504
QUnit.test('T309987 - item should not be changed on the "tab" press', function(assert) {
55145505
const items = ['first', 'second'];
55155506
const value = items[1];
@@ -5989,7 +5980,6 @@ QUnit.module('acceptCustomValue mode', moduleSetup, () => {
59895980
});
59905981
});
59915982

5992-
59935983
QUnit.module('focus policy', {
59945984
beforeEach: function() {
59955985
this.clock = sinon.useFakeTimers();
@@ -6558,7 +6548,6 @@ QUnit.module('displayExpr', moduleSetup, () => {
65586548
});
65596549
});
65606550

6561-
65626551
QUnit.module('The "customItemCreateEvent" option warning', {
65636552
beforeEach: function() {
65646553
this.$selectBox = $('#selectBox');

0 commit comments

Comments
 (0)