fix(ui5-multi-combobox): overflow tokens correctly when not enough space (#714)

FIXES: #712

Author: MapTo0

packages/main/src/Tokenizer.hbs

@@ -4,9 +4,7 @@
 			<div style="display: inline-block"></div>
 		</div>
 		{{#each tokens}}
-			<div class="ui5-tokenizer--token--wrapper">
-				<slot name="{{this._individualSlot}}"></slot>
-			</div>
+			<slot name="{{this._individualSlot}}"></slot>
 		{{/each}}
 	</div>
 

packages/main/src/Tokenizer.js

@@ -24,9 +24,7 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ {
 		showMore: { type: Boolean },
 		disabled: { type: Boolean },
-
-		_nMoreText: { type: String, noAttribute: true },
-		_hiddenTokens: { type: Object, multiple: true },
+		_nMoreText: { type: String },
 	},
 	events: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ {
 		tokenDelete: {
@@ -75,13 +73,18 @@ class Tokenizer extends UI5Element {
 		return styles;
 	}
 
+	_handleResize() {
+		/*
+		 * Overflow happens with a pure CSS, but we
+		 * have to update the "n more" label when tokenizer is resized
+		 */
+		this._invalidate();
+	}
+
 	constructor() {
 		super();
 
-		this._itemsCount = 0;
-		this._lastIndex = 0;
-		this._lastTokenCount = 0;
-		this._recalculateLayouting = false;
+		this._tokensCount = 0;
 		this._resizeHandler = this._handleResize.bind(this);
 		this._itemNav = new ItemNavigation(this);
 
@@ -101,20 +104,12 @@ class Tokenizer extends UI5Element {
 	onBeforeRendering() {
 		this._itemNav.init();
 
-		if (this._lastTokenCount !== this.tokens.length) {
-			this._recalculateLayouting = true;
-		}
-
-		this._lastTokenCount = this.tokens.length;
-		this._nMoreText = this.resourceBundle.getText(MULTIINPUT_SHOW_MORE_TOKENS, [this._hiddenTokens.length]);
+		setTimeout(() => {
+			// wait for the layouting and update the text
+			this._nMoreText = this.resourceBundle.getText(MULTIINPUT_SHOW_MORE_TOKENS, [this.overflownTokensCount]);
+		}, 0);
 	}
 
-	onAfterRendering() {
-		if (this._recalculateLayouting) {
-			this._handleResize();
-			this._recalculateLayouting = false;
-		}
-	}
 
 	onEnterDOM() {
 		ResizeHandler.register(this.shadowRoot.querySelector(".ui5-tokenizer--content"), this._resizeHandler);
@@ -128,37 +123,19 @@ class Tokenizer extends UI5Element {
 		this.fireEvent("showMoreItemsPress");
 	}
 
-	_handleResize() {
-		const overflowTokens = this._getTokens(true);
-
-		if (!overflowTokens.length) {
-			this._hiddenTokens = [];
-		}
-
-		this._hiddenTokens = overflowTokens;
+	_getTokens() {
+		return this.tokens;
 	}
 
-	_getTokens(overflow) {
-		const firstToken = this.shadowRoot.querySelector(".ui5-tokenizer-token-placeholder");
-
-		if (!firstToken) {
-			return [];
-		}
-
-		const firstTokenTop = firstToken.getBoundingClientRect().top;
-		const tokens = [];
-
-		if (firstToken && this.tokens.length) {
-			this.tokens.forEach(token => {
-				const tokenTop = token.getBoundingClientRect().top;
-				const tokenOverflows = overflow && tokenTop > firstTokenTop;
-				const tokenVisible = !overflow && tokenTop <= firstTokenTop;
-
-				(tokenVisible || tokenOverflows) && tokens.push(token);
-			});
+	onAfterRendering() {
+		/*
+			We schedule an invalidation as we have the tokens count
+			changed and we need them rendered for the nmore count
+		*/
+		if (this._tokensCount !== this.tokens.length) {
+			this._invalidate();
+			this._tokensCount = this.tokens.length;
 		}
-
-		return tokens;
 	}
 
 	_tokenDelete(event) {
@@ -193,7 +170,22 @@ class Tokenizer extends UI5Element {
 	}
 
 	get showNMore() {
-		return this.showMore && this._hiddenTokens.length;
+		return this.showMore && this.overflownTokensCount;
+	}
+
+	get overflownTokensCount() {
+		const placeholderToken = this.shadowRoot.querySelector(".ui5-tokenizer-token-placeholder");
+
+		if (!placeholderToken) {
+			return;
+		}
+
+		const placeholderTokenRect = placeholderToken.getBoundingClientRect();
+		const tokens = this.tokens.filter(token => {
+			return placeholderTokenRect.top < token.getBoundingClientRect().top;
+		});
+
+		return tokens.length;
 	}
 
 	get classes() {

packages/main/src/themes/MultiComboBox.css

@@ -12,6 +12,10 @@
 	height: 100%;
 }
 
+.ui5-multi-combobox-token {
+	margin-top: var(--_ui5-multi_combobox_token_margin_top);
+}
+
 .ui5-multi-combobox-icon {
 	color: var(--sapUiContentIconColor);
 	cursor: pointer;
@@ -32,12 +36,9 @@
 	background: var(--sapUiButtonLiteHoverBackground);
 }
 
-.ui5-multi-combobox-token {
-	height: 80%;
-}
-
 :host([data-ui5-compact-size]) .ui5-multi-combobox-token {
 	height: 100%;
+	margin-top: 0;
 }
 
 .ui5-multi-combobox-tokenizer {
@@ -57,4 +58,5 @@ ui5-multi-combobox:not([hidden]) {
 
 ui5-multi-combobox[data-ui5-compact-size] .ui5-multi-combobox-token {
 	height: 100%;
+	margin-top: 0;
 }

packages/main/src/themes/Tokenizer.css

@@ -52,7 +52,7 @@
 
 .ui5-tokenizer-token-placeholder {
 	display: inline-block;
-	height: 1px;
+	height: 100%;
 	width: 1px;
 	margin-top: auto;
 }

packages/main/src/themes/base/MultiComboBox-parameters.css

@@ -0,0 +1,3 @@
+:root {
+	--_ui5-multi_combobox_token_margin_top: 3px;
+}

packages/main/src/themes/sap_belize/MultiComboBox-parameters.css

@@ -0,0 +1 @@
+@import "../base/MultiComboBox-parameters.css";

packages/main/src/themes/sap_belize/parameters-bundle.css

@@ -28,3 +28,4 @@
 @import "./ToggleButton-parameters.css";
 @import "./YearPicker-parameters.css";
 @import "./Token-parameters.css";
+@import "./MultiComboBox-parameters.css";

packages/main/src/themes/sap_belize_hcb/MultiComboBox-parameters.css

@@ -0,0 +1 @@
+@import "../base/MultiComboBox-parameters.css";

packages/main/src/themes/sap_belize_hcb/parameters-bundle.css

@@ -27,3 +27,4 @@
 @import "./ToggleButton-parameters.css";
 @import "./YearPicker-parameters.css";
 @import "./Token-parameters.css";
+@import "./MultiComboBox-parameters.css";

packages/main/src/themes/sap_fiori_3/MultiComboBox-parameters.css

@@ -0,0 +1,5 @@
+@import "../base/MultiComboBox-parameters.css";
+
+:root {
+	--_ui5-multi_combobox_token_margin_top: 1px;
+}

packages/main/src/themes/sap_fiori_3/parameters-bundle.css

@@ -27,3 +27,4 @@
 @import "./CalendarHeader-parameters.css";
 @import "./Table-parameters.css";
 @import "./Token-parameters.css";
+@import "./MultiComboBox-parameters.css";