Fix default multiselect height

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

l10n/messages.pot

@@ -58,7 +58,7 @@ msgstr ""
 msgid "No emoji found"
 msgstr ""
 
-#: src/components/Multiselect/Multiselect.vue:213
+#: src/components/Multiselect/Multiselect.vue:218
 #: src/components/MultiselectTags/MultiselectTags.vue:78
 #: src/components/SettingsSelectGroup/SettingsSelectGroup.vue:38
 msgid "No results"

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,7 +111,11 @@ 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" :size="24" />
+ </template>
+ </Multiselect>
 </template>
 
 <script>

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,13 @@
  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
+
+ // Anything inside will trigger the select opening
+ &, * {
+ cursor: pointer;
+ }
  }
  /* displayed text if tag limit reached */
  .multiselect__strong,
@@ -153,7 +159,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;