From 0f92fe34cfd70a5461f598847e6ad31eaddea894 Mon Sep 17 00:00:00 2001
From: Carl Schwan <carl@carlschwan.eu>
Date: Thu, 25 Aug 2022 15:29:37 +0200
Subject: [PATCH 1/2] Improve multiselect

- Add focus effect for better accessibility
- Increase font size to be 15px like the other component
- Update style to be more like the NcInputField

There is still some remaining issues that are not fixed by this PR,
notably the width of the multiselect component change when clicking
on it. This is a preexisting issue

Signed-off-by: Carl Schwan <carl@carlschwan.eu>
---
 .../NcMultiselect/NcMultiselect.vue           |  8 +++
 src/components/NcMultiselect/index.scss       | 55 +++++++++++--------
 2 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/src/components/NcMultiselect/NcMultiselect.vue b/src/components/NcMultiselect/NcMultiselect.vue
index c6d9e69829..09289c9a06 100644
--- a/src/components/NcMultiselect/NcMultiselect.vue
+++ b/src/components/NcMultiselect/NcMultiselect.vue
@@ -41,6 +41,14 @@ export default {
 	}
 }
 </script>
+
+<style>
+.wrapper {
+	display: flex;
+	gap: 8px;
+	align-items: start;
+}
+</style>
 ```
 
 ### Simple example with objects
diff --git a/src/components/NcMultiselect/index.scss b/src/components/NcMultiselect/index.scss
index 518a697f96..c20f42de6e 100644
--- a/src/components/NcMultiselect/index.scss
+++ b/src/components/NcMultiselect/index.scss
@@ -16,24 +16,6 @@
 		z-index: 2 !important;
 	}
 
-	// active state, force the input to be shown, we don't want
-	// the placeholder or the currently selected options
-	&.multiselect--active {
-		/* Opened: force display the input */
-		input.multiselect__input {
-			opacity: $opacity_full !important;
-			cursor: text !important;
-			// remove border radius on bottom opening
-			border-radius: var(--border-radius) var(--border-radius) 0 0;
-			display: block !important;
-		}
-
-		/* multiselect__limit hidden if active */
-		.multiselect__limit {
-			display: none;
-		}
-	}
-
 	// Remove radius on top opening
 	&.multiselect--active.multiselect--above {
 		input.multiselect__input {
@@ -65,13 +47,17 @@
 		display: flex;
 		flex-wrap: nowrap;
 		overflow: hidden;
-		border: 1px solid var(--color-border-dark);
+		border: 2px solid var(--color-border-dark);
 		cursor: pointer;
 		position: relative;
-		border-radius: 3px;
-		min-height: 34px;
+		border-radius: var(--border-radius-large);
+		min-height: 44px;
 		height: 100%;
 
+		&:focus, &:hover {
+			border-color: var(--color-primary);
+		}
+
 		/* tag wrapper */
 		.multiselect__tags-wrap {
 			align-items: center;
@@ -141,6 +127,7 @@
 			// Align content and make the flow smoother
 			display: flex;
 			align-items: center;
+			font-size: var(--default-font-size);
 
 			// Anything inside will trigger the select opening
 			&, * {
@@ -165,18 +152,38 @@
 			position: relative !important;
 			margin: 0;
 			opacity: 0;
-			/* let's leave it on top of tags but hide it */
-			height: 100% !important;
 			border: none;
 			/* override hide to force show the placeholder */
 			/* only when not active */
 			cursor: pointer;
 			/* override inline styling of the lib */
-			padding: 7px 6px !important;
+			padding: 7px 4px !important;
+			display: none;
+            font-size: var(--default-font-size);
+		}
+	}
+
+	// active state, force the input to be shown, we don't want
+	// the placeholder or the currently selected options
+	&.multiselect--active {
+		/* Opened: force display the input */
+		input.multiselect__input {
+			opacity: $opacity_full !important;
+			cursor: text !important;
+			// remove border radius on bottom opening
+			border-radius: var(--border-radius) var(--border-radius) 0 0;
+			display: block !important;
+			padding: 12px 15px !important;
+			height: 40px !important;
+		}
+
+		/* multiselect__limit hidden if active */
+		.multiselect__limit {
 			display: none;
 		}
 	}
 
+
 	/* results wrapper */
 	.multiselect__content-wrapper {
 		position: absolute;

From ed81162d5d11aa897e3b88fb05d56c5ddcc5a282 Mon Sep 17 00:00:00 2001
From: Carl Schwan <carl@carlschwan.eu>
Date: Fri, 26 Aug 2022 10:18:01 +0200
Subject: [PATCH 2/2] Fix code style

Signed-off-by: Carl Schwan <carl@carlschwan.eu>
---
 src/components/NcMultiselect/index.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/NcMultiselect/index.scss b/src/components/NcMultiselect/index.scss
index c20f42de6e..516ff6c6c1 100644
--- a/src/components/NcMultiselect/index.scss
+++ b/src/components/NcMultiselect/index.scss
@@ -159,7 +159,7 @@
 			/* override inline styling of the lib */
 			padding: 7px 4px !important;
 			display: none;
-            font-size: var(--default-font-size);
+		font-size: var(--default-font-size);
 		}
 	}
 
@@ -183,7 +183,6 @@
 		}
 	}
 
-
 	/* results wrapper */
 	.multiselect__content-wrapper {
 		position: absolute;