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; +}