From 1c52c9ca687627bc3f0e20999b28a83c7b47f635 Mon Sep 17 00:00:00 2001 From: MapTo0 Date: Tue, 25 Nov 2025 22:15:45 +0200 Subject: [PATCH 1/2] fix(ui5-tokenizer): improve layouting performance FIXES: #12596 --- packages/main/src/Tokenizer.ts | 34 ++++++++++++++++++-------- packages/main/src/themes/Tokenizer.css | 5 ++++ 2 files changed, 29 insertions(+), 10 deletions(-) diff --git a/packages/main/src/Tokenizer.ts b/packages/main/src/Tokenizer.ts index 2ee34d93796c..23ba0a019ba3 100644 --- a/packages/main/src/Tokenizer.ts +++ b/packages/main/src/Tokenizer.ts @@ -484,10 +484,19 @@ class Tokenizer extends UI5Element implements IFormInputElement { if (this.disabled) { return []; } + + const tokens = this._tokens; + const visible = []; - return this._tokens.filter((token, index) => { - return index < (this._tokens.length - this._nMoreCount); - }); + for (let i = 0; i < tokens.length; i++) { + if (tokens[i].overflows) { + break; + } + + visible.push(tokens[i]) + } + + return visible; } onAfterRendering() { @@ -1166,16 +1175,17 @@ class Tokenizer extends UI5Element implements IFormInputElement { return []; } + if (this.open) { + this.setAttribute("inline", ""); + return []; + } + const tokensArray = this._tokens; - // Reset the overflow prop of the tokens first in order - // to use their dimensions for calculation because already - // hidden tokens are set to 'display: none' - tokensArray.forEach(token => { - token.overflows = false; - }); + // layouts all tokens inline-block + this.setAttribute("inline", ""); - return tokensArray.filter(token => { + const tokens = tokensArray.filter(token => { const parentRect = this.contentDom.getBoundingClientRect(); const tokenRect = token.getBoundingClientRect(); const tokenEnd = Number(tokenRect.right.toFixed(2)); @@ -1187,6 +1197,10 @@ class Tokenizer extends UI5Element implements IFormInputElement { return token.overflows; }); + + this.removeAttribute("inline"); + + return tokens; } get _isPhone() { diff --git a/packages/main/src/themes/Tokenizer.css b/packages/main/src/themes/Tokenizer.css index c170ca5ceb3a..e9a18522dd66 100644 --- a/packages/main/src/themes/Tokenizer.css +++ b/packages/main/src/themes/Tokenizer.css @@ -11,6 +11,11 @@ height: auto; } +/* synchronously layout the tokens in a single line */ +:host([inline]) ::slotted([ui5-token]) { + display: inline-block !important; +} + :host([multi-line]) .ui5-tokenizer--content { display: flex; align-content: baseline; From b44cb01cd9b4ebcfd9a318d1d66c70f282b45ed5 Mon Sep 17 00:00:00 2001 From: MapTo0 Date: Tue, 25 Nov 2025 22:26:05 +0200 Subject: [PATCH 2/2] fix: lint --- packages/main/src/Tokenizer.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/main/src/Tokenizer.ts b/packages/main/src/Tokenizer.ts index 23ba0a019ba3..7cca4379a625 100644 --- a/packages/main/src/Tokenizer.ts +++ b/packages/main/src/Tokenizer.ts @@ -484,7 +484,7 @@ class Tokenizer extends UI5Element implements IFormInputElement { if (this.disabled) { return []; } - + const tokens = this._tokens; const visible = []; @@ -493,9 +493,9 @@ class Tokenizer extends UI5Element implements IFormInputElement { break; } - visible.push(tokens[i]) + visible.push(tokens[i]); } - + return visible; }