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-input): one token added on enter press #10385

Merged
merged 4 commits into from
Dec 18, 2024
Merged

fix(ui5-multi-input): one token added on enter press #10385

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5199edb
fix(ui5-multiinput): one token added on enter press
StefanDimitrov04 Dec 15, 2024
0ad9de2
fix(ui5-multiinput): fix test and lint errors
StefanDimitrov04 Dec 15, 2024
5dc412c
Merge remote-tracking branch 'origin/main' into fix-multiinput
StefanDimitrov04 Dec 17, 2024
946d5e3
fix(ui5-multiinput): fix variable name and lint errors
StefanDimitrov04 Dec 17, 2024
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
47 changes: 47 additions & 0 deletions packages/main/cypress/specs/MultiInput.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
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", () => {
it("creates only one token when typing 'ad' and pressing Enter", () => {
cy.mount(html`<ui5-multi-input show-suggestions show-value-help-icon id="suggestion-token">
<ui5-suggestion-item text="Aute"></ui5-suggestion-item>
<ui5-suggestion-item text="ad"></ui5-suggestion-item>
<ui5-suggestion-item text="exercitation"></ui5-suggestion-item>
<ui5-suggestion-item text="esse"></ui5-suggestion-item>
<ui5-suggestion-item text="labore"></ui5-suggestion-item>
<ui5-suggestion-item text="amet"></ui5-suggestion-item>
<ui5-suggestion-item text="aute"></ui5-suggestion-item>
<ui5-suggestion-item text="excepteur"></ui5-suggestion-item>
</ui5-multi-input>`);
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");
});
});
11 changes: 9 additions & 2 deletions packages/main/src/Input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -594,6 +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;
_isChangeTriggeredBySuggestion: boolean;
@i18n("@ui5/webcomponents")
static i18nBundle: I18nBundle;

Expand Down Expand Up @@ -651,6 +652,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._isChangeTriggeredBySuggestion = false;

this._handleResizeBound = this._handleResize.bind(this);

this._keepInnerValue = false;
Expand Down Expand Up @@ -969,7 +972,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement

this._keepInnerValue = false;
this.focused = false; // invalidating property

this._isChangeTriggeredBySuggestion = false;
if (this.showClearIcon && !this._effectiveShowClearIcon) {
this._clearIconClicked = false;
this._handleChange();
Expand Down Expand Up @@ -1012,9 +1015,12 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
}

const fireChange = () => {
this.fireDecoratorEvent(INPUT_EVENTS.CHANGE);
if (!this._isChangeTriggeredBySuggestion) {
this.fireDecoratorEvent(INPUT_EVENTS.CHANGE);
}
this.previousValue = this.value;
this.typedInValue = this.value;
this._isChangeTriggeredBySuggestion = false;
};

if (this.previousValue !== this.getInputDOMRefSync()!.value) {
Expand Down Expand Up @@ -1284,6 +1290,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement

this.fireDecoratorEvent(INPUT_EVENTS.CHANGE);

this._isChangeTriggeredBySuggestion = true;
// value might change in the change event handler
this.typedInValue = this.value;
this.previousValue = this.value;
Expand Down
Loading