From 5199edb4e3eb1325170efc07c3b42e8d4c26eff8 Mon Sep 17 00:00:00 2001 From: Stefan Dimitrov Date: Sun, 15 Dec 2024 20:44:43 +0200 Subject: [PATCH 1/3] fix(ui5-multiinput): one token added on enter press --- packages/main/cypress/specs/MultiInput.cy.ts | 48 ++++++++++++++++++++ packages/main/src/Input.ts | 11 ++++- 2 files changed, 57 insertions(+), 2 deletions(-) create mode 100644 packages/main/cypress/specs/MultiInput.cy.ts diff --git a/packages/main/cypress/specs/MultiInput.cy.ts b/packages/main/cypress/specs/MultiInput.cy.ts new file mode 100644 index 000000000000..de182465fe6b --- /dev/null +++ b/packages/main/cypress/specs/MultiInput.cy.ts @@ -0,0 +1,48 @@ +import { html } from "lit"; +import "../../src/MultiInput.js"; +import "../../src/Tokenizer.js"; +import "../../src/features/InputSuggestions.js"; +import "../../src/SuggestionItem.js"; + +describe("MultiInput Web Component", () => { + cy.mount(html` + + + + + + + + + `); + + it("creates only one token when typing 'ad' and pressing Enter", () => { + cy.get("#suggestion-token").then(multiInput => { + const createTokenFromText = (text: string): HTMLElement => { + const token = document.createElement("ui5-token"); + token.setAttribute("text", text); + token.setAttribute("slot", "tokens"); + return token; + }; + + multiInput[0].addEventListener("keydown", (event: KeyboardEvent) => { + const inputElement = multiInput[0] as HTMLInputElement; + if (event.key === "Enter" && inputElement.value) { + const token = createTokenFromText(inputElement.value); + inputElement.appendChild(token); + inputElement.value = ""; + } + }); + }); + + cy.get("#suggestion-token") + .shadow() + .find("input") + .type("ad{enter}"); + + cy.get("ui5-multi-input") + .find("ui5-token") + .should("have.length", 1) + .and("have.attr", "text", "ad"); + }); +}); diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts index 0ac3733bcc5d..5215bc2d063b 100644 --- a/packages/main/src/Input.ts +++ b/packages/main/src/Input.ts @@ -607,6 +607,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement _changeToBeFired?: boolean; // used to wait change event firing after suggestion item selection _performTextSelection?: boolean; _isLatestValueFromSuggestions: boolean; + hasAcceptedSuggestionTriggeredChange: boolean; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; @@ -664,6 +665,8 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement // Indicates whether the value of the input is comming from a suggestion item this._isLatestValueFromSuggestions = false; + this.hasAcceptedSuggestionTriggeredChange = false; + this._handleResizeBound = this._handleResize.bind(this); this._keepInnerValue = false; @@ -979,7 +982,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement this._keepInnerValue = false; this.focused = false; // invalidating property - + this.hasAcceptedSuggestionTriggeredChange = false; if (this.showClearIcon && !this._effectiveShowClearIcon) { this._clearIconClicked = false; this._handleChange(); @@ -1022,9 +1025,12 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement } const fireChange = () => { - this.fireDecoratorEvent(INPUT_EVENTS.CHANGE); + if (!this.hasAcceptedSuggestionTriggeredChange) { + this.fireDecoratorEvent(INPUT_EVENTS.CHANGE); + } this.previousValue = this.value; this.typedInValue = this.value; + this.hasAcceptedSuggestionTriggeredChange = false; }; if (this.previousValue !== this.getInputDOMRefSync()!.value) { @@ -1284,6 +1290,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement this.fireDecoratorEvent(INPUT_EVENTS.CHANGE); + this.hasAcceptedSuggestionTriggeredChange = true; // value might change in the change event handler this.typedInValue = this.value; this.previousValue = this.value; From 0ad9de27aff8d594b909839c201070a50767581a Mon Sep 17 00:00:00 2001 From: Stefan Dimitrov Date: Sun, 15 Dec 2024 21:05:31 +0200 Subject: [PATCH 2/3] fix(ui5-multiinput): fix test and lint errors --- packages/main/cypress/specs/MultiInput.cy.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/main/cypress/specs/MultiInput.cy.ts b/packages/main/cypress/specs/MultiInput.cy.ts index de182465fe6b..ee960ab10237 100644 --- a/packages/main/cypress/specs/MultiInput.cy.ts +++ b/packages/main/cypress/specs/MultiInput.cy.ts @@ -5,7 +5,8 @@ import "../../src/features/InputSuggestions.js"; import "../../src/SuggestionItem.js"; describe("MultiInput Web Component", () => { - cy.mount(html` + it("creates only one token when typing 'ad' and pressing Enter", () => { + cy.mount(html` @@ -15,8 +16,6 @@ describe("MultiInput Web Component", () => { `); - - it("creates only one token when typing 'ad' and pressing Enter", () => { cy.get("#suggestion-token").then(multiInput => { const createTokenFromText = (text: string): HTMLElement => { const token = document.createElement("ui5-token"); From 946d5e32d5f8930690b981f2dc23841164ec93d1 Mon Sep 17 00:00:00 2001 From: Stefan Dimitrov Date: Tue, 17 Dec 2024 19:48:45 +0200 Subject: [PATCH 3/3] fix(ui5-multiinput): fix variable name and lint errors --- packages/main/src/Input.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts index 9708acf5c08c..11659693e014 100644 --- a/packages/main/src/Input.ts +++ b/packages/main/src/Input.ts @@ -594,7 +594,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement _changeToBeFired?: boolean; // used to wait change event firing after suggestion item selection _performTextSelection?: boolean; _isLatestValueFromSuggestions: boolean; - hasAcceptedSuggestionTriggeredChange: boolean; + _isChangeTriggeredBySuggestion: boolean; @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; @@ -652,7 +652,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement // Indicates whether the value of the input is comming from a suggestion item this._isLatestValueFromSuggestions = false; - this.hasAcceptedSuggestionTriggeredChange = false; + this._isChangeTriggeredBySuggestion = false; this._handleResizeBound = this._handleResize.bind(this); @@ -972,7 +972,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement this._keepInnerValue = false; this.focused = false; // invalidating property - this.hasAcceptedSuggestionTriggeredChange = false; + this._isChangeTriggeredBySuggestion = false; if (this.showClearIcon && !this._effectiveShowClearIcon) { this._clearIconClicked = false; this._handleChange(); @@ -1015,12 +1015,12 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement } const fireChange = () => { - if (!this.hasAcceptedSuggestionTriggeredChange) { + if (!this._isChangeTriggeredBySuggestion) { this.fireDecoratorEvent(INPUT_EVENTS.CHANGE); } this.previousValue = this.value; this.typedInValue = this.value; - this.hasAcceptedSuggestionTriggeredChange = false; + this._isChangeTriggeredBySuggestion = false; }; if (this.previousValue !== this.getInputDOMRefSync()!.value) { @@ -1290,7 +1290,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement this.fireDecoratorEvent(INPUT_EVENTS.CHANGE); - this.hasAcceptedSuggestionTriggeredChange = true; + this._isChangeTriggeredBySuggestion = true; // value might change in the change event handler this.typedInValue = this.value; this.previousValue = this.value;