From a77cd4b2dd23da73f3429a537b90ba734c33a8ad Mon Sep 17 00:00:00 2001 From: Nikoleta Ivanova <31706628+nikoletavnv@users.noreply.github.com> Date: Fri, 19 Jul 2024 13:56:59 +0300 Subject: [PATCH] fix(ui5-input): fire change event properly when suggestions (#9429) * fix(ui5-input): fire change event properly when suggestions Do not fire change event when the same suggestion item is reselected. Fixes #8912 --- packages/main/src/Input.ts | 8 +-- packages/main/test/specs/Input.spec.js | 71 +++++++++++++++++++++++++- 2 files changed, 74 insertions(+), 5 deletions(-) diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts index fc7491475efa..fe2441f0df0c 100644 --- a/packages/main/src/Input.ts +++ b/packages/main/src/Input.ts @@ -1118,7 +1118,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement } _handleTypeAhead(item: IInputSuggestionItemSelectable) { - const value = item.text ? item.text : item.textContent || ""; + const value = item.text ? item.text : ""; this._innerValue = value; this.value = value; @@ -1219,14 +1219,14 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement } const value = this.typedInValue || this.value; - const itemText = item.text || item.textContent || ""; // keep textContent for compatibility + const itemText = item.text || ""; const fireChange = keyboardUsed ? this.valueBeforeItemSelection !== itemText : value !== itemText; this.hasSuggestionItemSelected = true; + this.value = itemText; - if (fireChange) { - this.value = itemText; + if (fireChange && (this.previousValue !== itemText)) { this.valueBeforeItemSelection = itemText; this.lastConfirmedValue = itemText; diff --git a/packages/main/test/specs/Input.spec.js b/packages/main/test/specs/Input.spec.js index e98835a0b308..de82dba8d31b 100644 --- a/packages/main/test/specs/Input.spec.js +++ b/packages/main/test/specs/Input.spec.js @@ -1041,7 +1041,7 @@ describe("Input general interaction", () => { assert.strictEqual(await changeCount.getHTML(false), "2", "The change event is called now, since the value is updated"); }); - it("Change event should be fired only once, when a user types a value identical to a item and presses ENTER - #3732", async () => { + it("Change event should be fired only once, when a user types a value identical to an item and presses ENTER - #3732", async () => { const inputChange = await browser.$("#input-change-2").shadow$("input"); const changeCount = await browser.$("#input-change-count-2"); @@ -1094,6 +1094,75 @@ describe("Input general interaction", () => { assert.strictEqual(await input.getValue(), "", "Input's value should be empty"); assert.strictEqual(await inner.getValue(), "", "Inner input's value should be empty"); }); + + it("Change event is not fired when the same suggestion item is selected (with typeahead) - #8912", async () => { + const suggestionsInput = await browser.$("#myInput"); + + await suggestionsInput.click(); + await suggestionsInput.keys("a"); + + await suggestionsInput.keys("ArrowDown"); + await suggestionsInput.keys("ArrowDown"); + await suggestionsInput.keys("Enter"); + + const changeCount = await browser.$("#myInput-change-count"); + + // Assert + assert.strictEqual(await changeCount.getHTML(false), "1", "The change event is called once"); + assert.strictEqual(await suggestionsInput.getValue(), "Afghanistan", "Input's value should be the text of the selected item"); + + await suggestionsInput.keys("Backspace"); + + await suggestionsInput.keys("ArrowDown"); + await suggestionsInput.keys("ArrowDown"); + await suggestionsInput.keys("Enter"); + + assert.strictEqual(await changeCount.getHTML(false), "1", "The change event is still called once"); + assert.strictEqual(await suggestionsInput.getValue(), "Afghanistan", "Input's value should be the text of the selected item"); + }); + + it("Change event is not fired when the same suggestion item is selected (no-typeahead) - #8912", async () => { + const suggestionsInput = await browser.$("#myInput"); + await browser.execute(() => { + document.querySelector("#myInput").noTypeahead = true; + }); + + await suggestionsInput.keys("Backspace"); + + await suggestionsInput.keys("ArrowDown"); + await suggestionsInput.keys("ArrowDown"); + await suggestionsInput.keys("Enter"); + + const changeCount = await browser.$("#myInput-change-count"); + + assert.strictEqual(await changeCount.getHTML(false), "1", "The change event is still called once"); + assert.strictEqual(await suggestionsInput.getValue(), "Afghanistan", "Input's value should be the text of the selected item"); + + // restore the default property value + await browser.execute(() => { + document.querySelector("#myInput").noTypeahead = false; + }); + }); + + it("Change event is not fired when the same suggestion item is selected after focus out and selecting suggestion again - #8912", async () => { + const suggestionsInput = await browser.$("#myInput"); + const changeCount = await browser.$("#myInput-change-count"); + + assert.strictEqual(await changeCount.getHTML(false), "1", "The change event is called once"); + assert.strictEqual(await suggestionsInput.getValue(), "Afghanistan", "Input's value should be the text of the selected item"); + + await suggestionsInput.keys("Tab"); + + await suggestionsInput.click(); + await suggestionsInput.keys("Backspace"); + await suggestionsInput.keys("ArrowDown"); + await suggestionsInput.keys("ArrowDown"); + await suggestionsInput.keys("Enter"); + + // Assert + assert.strictEqual(await changeCount.getHTML(false), "1", "The change event is still called once"); + assert.strictEqual(await suggestionsInput.getValue(), "Afghanistan", "Input's value should be the text of the selected item"); + }); }); describe("Input arrow navigation", () => {