Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DropDownList: do not load current value on reset method call (T1247576) #28618

Merged
merged 1 commit into from
Dec 24, 2024
Merged

DropDownList: do not load current value on reset method call (T1247576) #28618

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 18 additions & 4 deletions packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_list.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -265,12 +265,20 @@ const DropDownList = DropDownEditor.inherit({
return DROPDOWNLIST_POPUP_WRAPPER_CLASS;
},

_renderInputValue() {
const value = this._getCurrentValue();
_renderInputValue({ value, renderOnly }: { value?: unknown; renderOnly?: boolean } = {}) {
const currentValue = value ?? this._getCurrentValue();
this._rejectValueLoading();

return this._loadInputValue(value, this._setSelectedItem.bind(this))
.always(this.callBase.bind(this, value));
if (renderOnly) {
return this.callBase(currentValue);
}

return this
._loadInputValue(
currentValue,
(...args) => { this._setSelectedItem(...args); },
)
.always(this.callBase.bind(this, currentValue));
},

_loadInputValue(value, callback) {
Expand Down Expand Up @@ -301,6 +309,10 @@ const DropDownList = DropDownEditor.inherit({
return selectedItem;
},

_resetInputText(): void {
this._renderInputValue({ renderOnly: true });
},

_loadItem(value, cache) {
const selectedItem = this._getItemFromPlain(value, cache);

Expand Down Expand Up @@ -812,7 +824,9 @@ const DropDownList = DropDownEditor.inherit({
if (this._list) {
delete this._list;
}

delete this._isLastMinSearchLengthExceeded;

this.callBase();
},

Expand Down
9 changes: 6 additions & 3 deletions packages/devextreme/js/__internal/ui/m_drop_down_box.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,12 +101,12 @@ const DropDownBox = (DropDownEditor as any).inherit({
return sortedValues.map((x) => x.itemDisplayValue);
},

_renderInputValue() {
_renderInputValue({ renderOnly }: { renderOnly?: boolean } = {}) {
this._rejectValueLoading();
const values = [];

if (!this._dataSource) {
this.callBase(values);
this.callBase({ renderOnly, value: values });

return Deferred().resolve();
}
Expand Down Expand Up @@ -138,7 +138,10 @@ const DropDownBox = (DropDownEditor as any).inherit({
.always(() => {
const orderedValues = this._sortValuesByKeysOrder(keys, values);
this.option('displayValue', orderedValues);
callBase(values.length && orderedValues);
callBase({
renderOnly,
value: values.length && orderedValues,
});
});
},

Expand Down
4 changes: 2 additions & 2 deletions packages/devextreme/js/__internal/ui/m_lookup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -945,8 +945,8 @@ const Lookup = DropDownList.inherit({
return this.option('searchEnabled') && this._searchBox ? this._searchBox.option('value') : '';
},

_renderInputValue() {
return this.callBase().always(() => {
_renderInputValue(...args) {
return this.callBase(...args).always(() => {
this._refreshSelected();
});
},
Expand Down
4 changes: 2 additions & 2 deletions packages/devextreme/js/__internal/ui/m_select_box.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,8 +287,8 @@ const SelectBox = (DropDownList as any).inherit({
return Deferred().resolve();
},

_renderInputValue() {
return this.callBase().always(() => {
_renderInputValue(...args) {
return this.callBase(...args).always(() => {
this._renderInputValueAsync();
});
},
Expand Down
4 changes: 2 additions & 2 deletions packages/devextreme/js/__internal/ui/m_tag_box.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -601,10 +601,10 @@ const TagBox = (SelectBox as any).inherit({
this.callBase(e);
},

_renderInputValue() {
_renderInputValue(...args) {
this.option('displayValue', this._searchValue());

return this.callBase();
return this.callBase(...args);
},

_restoreInputText(saveEditingValue) {
Expand Down
18 changes: 15 additions & 3 deletions packages/devextreme/js/__internal/ui/text_box/m_text_editor.base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -916,10 +916,22 @@ const TextEditorBase = Editor.inherit({
}
},

_resetInputText(): void {
this._options.silent('text', this._initialValue);
this._renderValue();
},

_isValueEqualToInitial(): boolean {
const { value } = this.option();
const initialValue = this._initialValue;

return value === initialValue;
},

_resetToInitialValue() {
if (this.option('value') === this._initialValue) {
this._options.silent('text', this._initialValue);
this._renderValue();
const shouldResetInputText = this._isValueEqualToInitial();
if (shouldResetInputText) {
this._resetInputText();
} else {
this.callBase();
}
Expand Down
8 changes: 4 additions & 4 deletions packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dateRangeBox.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2615,7 +2615,7 @@ QUnit.module('Validation', {
assert.strictEqual(this.instance.option('isValid'), true);
});

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

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

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

this.instance.reset();

assert.strictEqual($startDateBoxInput.val(), '');
assert.strictEqual($startDateBoxInput.val(), '', 'input value is reset');
});

QUnit.test('dateRangeBox should not be re-validated after readOnly option change', function(assert) {
Expand Down
125 changes: 123 additions & 2 deletions packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dropDownList.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1534,6 +1534,128 @@ QUnit.module('dataSource integration', moduleConfig, function() {
});
});

QUnit.module('reset method', moduleConfig, () => {
[true, false].forEach(acceptCustomValue => {
QUnit.test(`byKey should not be called if value is equal to initial, acceptCustomValue is ${acceptCustomValue} (T1247576)`, function(assert) {
const byKeyHandler = sinon.spy(key => key);
const items = ['initial'];

const dataSource = new DataSource({
store: new CustomStore({
load: () => items,
byKey: byKeyHandler,
}),
});

const instance = $('#dropDownList').dxDropDownList({
acceptCustomValue,
searchEnabled: false,
dataSource,
value: items[0],
}).dxDropDownList('instance');

assert.strictEqual(byKeyHandler.callCount, 1, 'byKey is called once after init');

instance.reset();

assert.strictEqual(byKeyHandler.callCount, 1, 'byKey is still called once');
});
});

['acceptCustomValue', 'searchEnabled'].forEach(editingOption => {
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) {
assert.expect(12);

const byKeyHandler = sinon.spy(key => key);
const items = ['initial'];
const additionalText = 'NEW';

const dataSource = new DataSource({
store: new CustomStore({
load: () => items,
byKey: byKeyHandler,
}),
});

const $element = $('#dropDownList').dxDropDownList({
acceptCustomValue: false,
searchEnabled: false,
[editingOption]: true,
dataSource,
valueChangeEvent: 'change',
value: items[0],
});

const instance = $element.dxDropDownList('instance');
const $input = $element.find(`.${TEXTEDITOR_INPUT_CLASS}`);
const keyboard = keyboardMock($input);

const assertState = (expectedText, messageComment) => {
assert.strictEqual($input.val(), expectedText, `input text is "${expectedText}" ${messageComment}`);
assert.strictEqual(instance.option('text'), expectedText, `text option is "${expectedText}" ${messageComment}`);
assert.strictEqual(instance.option('value'), items[0], `value option is "${items[0]}" ${messageComment}`);
assert.strictEqual(byKeyHandler.callCount, 1, 'no additional byKey for initial item is presented');
};

assertState(items[0], 'initially');

keyboard.type(additionalText);

assertState(`${additionalText}${items[0]}`, 'after typing');

instance.reset();

assertState(items[0], 'after reset');
});
});

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) {
assert.expect(12);

const byKeyHandler = sinon.spy(key => key);
const items = ['initial'];
const additionalText = 'NEW';
let expectedByKeyCallCount = 0;

const dataSource = new DataSource({
store: new CustomStore({
load: () => items,
byKey: byKeyHandler,
}),
});

const $element = $('#dropDownList').dxDropDownList({
acceptCustomValue: true,
valueChangeEvent: 'change',
dataSource,
value: items[0],
});

const instance = $element.dxDropDownList('instance');
const $input = $element.find(`.${TEXTEDITOR_INPUT_CLASS}`);
const keyboard = keyboardMock($input);

const assertState = (expectedText, messageComment) => {
expectedByKeyCallCount++;
assert.strictEqual($input.val(), expectedText, `input text is "${expectedText}" ${messageComment}`);
assert.strictEqual(instance.option('text'), expectedText, `text option is "${expectedText}" ${messageComment}`);
assert.strictEqual(instance.option('value'), expectedText, `value option is "${expectedText}" ${messageComment}`);
assert.strictEqual(byKeyHandler.callCount, expectedByKeyCallCount, 'byKey call is okay if loading value is not the current value');
};

assertState(items[0], 'initially');

keyboard.type(additionalText);
keyboard.change();

assertState(`${additionalText}${items[0]}`, 'after typing');

instance.reset();

assertState(items[0], 'after reset');
});
});

QUnit.module('action options', moduleConfig, () => {
QUnit.test('onItemClick action', function(assert) {
assert.expect(3);
Expand Down Expand Up @@ -1806,8 +1928,7 @@ QUnit.module('dropdownlist with groups', {
});
});

QUnit.module(
'data source from url',
QUnit.module('data source from url',
{
afterEach: function() {
ajaxMock.clear();
Expand Down
11 changes: 0 additions & 11 deletions packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/selectBox.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,6 @@ const moduleSetup = {
};

QUnit.module('hidden input', moduleSetup, () => {

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

QUnit.module('functionality', moduleSetup, () => {

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

QUnit.module('clearButton', moduleSetup, () => {

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

QUnit.module('showSelectionControls', moduleSetup, () => {

QUnit.test('showSelectionControls is true', function(assert) {
$('#selectBox').dxSelectBox({
items: [1],
Expand Down Expand Up @@ -1788,7 +1784,6 @@ QUnit.module('showSelectionControls', moduleSetup, () => {
});

QUnit.module('editing', moduleSetup, () => {

QUnit.test('readOnly option with searchEnabled', function(assert) {
const $selectBox = $('#selectBox').dxSelectBox({
items: ['item1', 'item2', 'text3'],
Expand Down Expand Up @@ -4195,7 +4190,6 @@ QUnit.module('search substitution', {
});
});


QUnit.module('Scrolling', {
beforeEach: function() {
fx.off = true;
Expand Down Expand Up @@ -4393,7 +4387,6 @@ QUnit.module('Async tests', {}, () => {
});

QUnit.module('regressions', moduleSetup, () => {

QUnit.test('dataSource null reference error', function(assert) {
assert.expect(0);

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

QUnit.module('hide on blur', moduleSetup, () => {

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

QUnit.module('keyboard navigation "TAB" button', moduleSetup, () => {

QUnit.test('T309987 - item should not be changed on the "tab" press', function(assert) {
const items = ['first', 'second'];
const value = items[1];
Expand Down Expand Up @@ -5954,7 +5945,6 @@ QUnit.module('acceptCustomValue mode', moduleSetup, () => {
});
});


QUnit.module('focus policy', {
beforeEach: function() {
this.clock = sinon.useFakeTimers();
Expand Down Expand Up @@ -6523,7 +6513,6 @@ QUnit.module('displayExpr', moduleSetup, () => {
});
});


QUnit.module('The "customItemCreateEvent" option warning', {
beforeEach: function() {
this.$selectBox = $('#selectBox');
Expand Down
Loading
Loading