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

fix(ui5-multi-combobox): Fix value reset on ESC #3958

Merged
merged 8 commits into from
Sep 27, 2021
+43 −0
Merged

fix(ui5-multi-combobox): Fix value reset on ESC #3958

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7e25190
Clear value on ESC
ndeshev Sep 18, 2021
d80d11b
Always reset value if custom value is not allowed
ndeshev Sep 20, 2021
8b3f5af
Linting
ndeshev Sep 20, 2021
3a67c8e
Remove the value removal on focusout - it will be fixed with another …
ndeshev Sep 21, 2021
61b339f
Resolve conflicts
ndeshev Sep 21, 2021
2fcc987
Test updates
ndeshev Sep 21, 2021
c80f944
Retrigger the build
ndeshev Sep 21, 2021
29b3971
Merge branch 'master' into mcb-esc
ndeshev Sep 27, 2021
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
8 changes: 8 additions & 0 deletions packages/main/src/MultiComboBox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
isSpace,
isLeft,
isRight,
isEscape,
isEnter,
} from "@ui5/webcomponents-base/dist/Keys.js";
import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
Expand Down Expand Up @@ -588,6 +589,11 @@ class MultiComboBox extends UI5Element {
this._tokenizer._focusLastToken();
}

// Reset value on ESC
if (isEscape(event) && (!this.allowCustomValues || (!this.open && this.allowCustomValues))) {
this.value = this._lastValue;
}

if (isEnter(event)) {
this.handleEnter();
}
Expand Down Expand Up @@ -845,6 +851,8 @@ class MultiComboBox extends UI5Element {
} else {
this._innerInput.blur();
}

this._lastValue = this.value;
}

inputFocusOut(event) {
Expand Down
35 changes: 35 additions & 0 deletions packages/main/test/specs/MultiComboBox.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -309,6 +309,41 @@ describe("MultiComboBox general interaction", () => {
assert.strictEqual(tokens.length, 2, "2 tokens are visible");
});

it ("Value should be reset on ESC key", async () => {
await browser.url(`http://localhost:${PORT}/test-resources/pages/MultiComboBox.html`);

const mCombo = await browser.$("#another-mcb");
const mCombo2 = await browser.$("#more-mcb");
const input = await mCombo.shadow$("#ui5-multi-combobox-input");
const input2 = await mCombo2.shadow$("#ui5-multi-combobox-input");

await input.click();
await input.keys("C");
await input.keys("Escape");
await input.keys("Escape");

assert.strictEqual(await mCombo.getProperty("value"), "", "Value should be reset to the initial one");

await input.click();
await input.keys("C");

// Move focus to another element and bring it back
await input2.click();
await input.click();

await input.keys("o");
await input.keys("Escape");
await input.keys("Escape");

assert.strictEqual(await mCombo.getProperty("value"), "C", "Value should be reset to the initial one");

await input2.click();
await input2.keys("C");
await input2.keys("Escape");

assert.strictEqual(await mCombo2.getProperty("value"), "", "Value should be cleared on escape even if the suggesitons are openjed");
});

it ("selects an item when enter is pressed and value matches a text of an item in the list", async () => {
await browser.url(`http://localhost:${PORT}/test-resources/pages/MultiComboBox.html`);

Expand Down