From 3d4d4f203a536717c8f5f006bf00b9a2bcd1e5b1 Mon Sep 17 00:00:00 2001 From: Nikolay Deshev Date: Thu, 5 Mar 2026 09:47:34 +0200 Subject: [PATCH] fix(ui5-multi-input): adjust last token margin fixes: #13184 --- packages/main/src/MultiInput.ts | 4 ++++ packages/main/src/Token.ts | 8 ++++++++ packages/main/src/themes/MultiInput.css | 4 ++++ 3 files changed, 16 insertions(+) diff --git a/packages/main/src/MultiInput.ts b/packages/main/src/MultiInput.ts index 7e4691169940..9c559995fff1 100644 --- a/packages/main/src/MultiInput.ts +++ b/packages/main/src/MultiInput.ts @@ -360,6 +360,10 @@ class MultiInput extends Input implements IFormInputElement { this.style.setProperty("--_ui5-input-icons-count", `${this.iconsCount}`); this.tokenizerAvailable = this.tokens && this.tokens.length > 0; + this.tokens.forEach((token, index) => { + (token as Token)._lastToken = index === this.tokens.length - 1; + }); + if (this.tokenizer) { this.tokenizer.readonly = this.readonly; } diff --git a/packages/main/src/Token.ts b/packages/main/src/Token.ts index 352119238981..1590ce9edcee 100644 --- a/packages/main/src/Token.ts +++ b/packages/main/src/Token.ts @@ -127,6 +127,14 @@ class Token extends UI5Element implements IToken { @property({ type: Boolean }) toBeDeleted = false; + /** + * Defines whether the token is the last one in the tokenizer + * @default false + * @private + */ + @property({ type: Boolean }) + _lastToken = false; + /** * Defines the tabIndex of the component. * @private diff --git a/packages/main/src/themes/MultiInput.css b/packages/main/src/themes/MultiInput.css index ab82555c4f85..b10c3d4934ff 100644 --- a/packages/main/src/themes/MultiInput.css +++ b/packages/main/src/themes/MultiInput.css @@ -36,3 +36,7 @@ --_ui5_input_tokenizer_min_width: 0px; width: var(--_ui5_input_tokenizer_min_width); } + +::slotted([ui5-token][_last-token]) { + margin-inline-end: 0.375rem; +}