From e4b04db1bdb4851a045d8fd4e30eaa80827f6e7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Wed, 18 Nov 2020 08:51:20 +0100
Subject: [PATCH] Fix default multiselect height
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 src/components/ListItemIcon/ListItemIcon.vue | 14 ++++++-
 src/components/Multiselect/Multiselect.vue   | 42 ++++++++++----------
 src/components/Multiselect/index.scss        | 15 +++++--
 3 files changed, 47 insertions(+), 24 deletions(-)

diff --git a/src/components/ListItemIcon/ListItemIcon.vue b/src/components/ListItemIcon/ListItemIcon.vue
index 69ac73cc5f..1ae666a5b9 100644
--- a/src/components/ListItemIcon/ListItemIcon.vue
+++ b/src/components/ListItemIcon/ListItemIcon.vue
@@ -149,6 +149,15 @@ export default {
 			default: defaultSize,
 		},
 
+		/**
+		 * Disable the margins of this component.
+		 * Useful for integration in Multiselect for example
+		 */
+		noMargin: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * See the [Avatar](#Avatar) displayName prop
 		 * Fallback to title
@@ -189,8 +198,11 @@ export default {
 		},
 
 		cssVars() {
+			// Don't use margin to calculate the height if noMargin
+			const margin = this.noMargin ? 0 : this.margin
+
 			return {
-				'--height': this.avatarSize + 2 * this.margin + 'px',
+				'--height': this.avatarSize + 2 * margin + 'px',
 				'--margin': this.margin + 'px',
 			}
 		},
diff --git a/src/components/Multiselect/Multiselect.vue b/src/components/Multiselect/Multiselect.vue
index c02c906860..cf0e588197 100644
--- a/src/components/Multiselect/Multiselect.vue
+++ b/src/components/Multiselect/Multiselect.vue
@@ -102,6 +102,7 @@ export default {
 
 ### User layout
 By specifying `:user-select="true"`, you can benefit from a fully formatted layout.
+The singleLabel slot here is optional of course and here for demonstration purposes
 
 > **Note:** Any extra binding from the object will be added as attribute (`$attrs`) on the ListItemIcon component used here
 
@@ -110,33 +111,34 @@ By specifying `:user-select="true"`, you can benefit from a fully formatted layo
 	<Multiselect v-model="value" :options="formatedOptions"
 		label="displayName" track-by="user"
 		:user-select="true"
-		style="width: 250px" />
+		style="width: 250px">
+		<template #singleLabel="{ option }">
+			<ListItemIcon v-bind="option" :title="option.displayName" :avatar-size="24" :no-margin="true" />
+		</template>
+	</Multiselect>
 </template>
 
 <script>
 import Multiselect from '../index'
+
+// Building fake data for the docs
+const options = ['admin', 'user1', 'user2', 'guest', 'group1']
+const formattedOptions = options.map(item => {
+	return {
+		user: item,
+		displayName: item,
+		subtitle: `This is the ${item.startsWith('group') ? 'group' : 'user'} ${item}`,
+		icon: item.startsWith('group') ? 'icon-group' : 'icon-user',
+		isNoUser: item.startsWith('group')
+	}
+})
 export default {
 	data() {
-		return {
-			value: null,
-			options: ['admin', 'user1', 'user2', 'guest', 'group1']
-		}
+			return {
+					value: formattedOptions[0],
+					formattedOptions,
+			}
 	},
-
-	computed: {
-		// Building fake data for the docs
-		formatedOptions() {
-			return this.options.map(item => {
-				return {
-					user: item,
-					displayName: item,
-					subtitle: `This is the ${item.startsWith('group') ? 'group' : 'user'} ${item}`,
-					icon: item.startsWith('group') ? 'icon-group' : 'icon-user',
-					isNoUser: item.startsWith('group')
-				}
-			})
-		}
-	}
 }
 </script>
 ```
diff --git a/src/components/Multiselect/index.scss b/src/components/Multiselect/index.scss
index a0b18889cd..40872e2009 100644
--- a/src/components/Multiselect/index.scss
+++ b/src/components/Multiselect/index.scss
@@ -12,8 +12,8 @@
 
 	/* Force single multiselect value to be shown when not active */
 	&:not(.multiselect--active) .multiselect__single {
-		position: absolute;
 		width: 100%;
+		z-index: 2 !important;
 	}
 
 	// active state, force the input to be shown, we don't want
@@ -64,6 +64,8 @@
 		position: relative;
 		border-radius: 3px;
 		min-height: 34px;
+		height: 100%;
+
 		/* tag wrapper */
 		.multiselect__tags-wrap {
 			align-items: center;
@@ -127,9 +129,16 @@
 			flex: 0 0 100%;
 			z-index: 1; /* above input */
 			background-color: var(--color-main-background);
-			cursor: pointer;
 			line-height: 18px; // 32px - 2*6px (padding) - 2*1px (border)
 			color: var(--color-text-lighter); // like the input
+			// Align content and make the flow smoother
+			display: flex;
+			align-items: center;
+			
+			// Anything inside will trigger the select opening
+			&, * {
+				cursor: pointer;
+			}
 		}
 		/* displayed text if tag limit reached */
 		.multiselect__strong,
@@ -153,7 +162,7 @@
 			margin: 0;
 			opacity: 0;
 			/* let's leave it on top of tags but hide it */
-			height: 100%;
+			height: 100% !important;
 			border: none;
 			/* override hide to force show the placeholder */
 			display: block !important;