diff --git a/packages/main/src/Tokenizer.ts b/packages/main/src/Tokenizer.ts index 2ee34d93796c..7cca4379a625 100644 --- a/packages/main/src/Tokenizer.ts +++ b/packages/main/src/Tokenizer.ts @@ -485,9 +485,18 @@ class Tokenizer extends UI5Element implements IFormInputElement { return []; } - return this._tokens.filter((token, index) => { - return index < (this._tokens.length - this._nMoreCount); - }); + const tokens = this._tokens; + const visible = []; + + 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;