From df08d2f151e065f6be2ee63cb7c2dbbec6209438 Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Tue, 5 Mar 2024 13:29:21 +0100
Subject: [PATCH] Add microinteractions to select dropdown [SCI-10328]

---
 app/javascript/vue/experiments/card.vue       |  2 +-
 app/javascript/vue/shared/select_dropdown.vue | 45 +++++++++++++++----
 2 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/app/javascript/vue/experiments/card.vue b/app/javascript/vue/experiments/card.vue
index bbdeca057..d80fde6d1 100644
--- a/app/javascript/vue/experiments/card.vue
+++ b/app/javascript/vue/experiments/card.vue
@@ -24,7 +24,7 @@
         <span class="text-sn-dark-grey">{{ i18n.t('experiments.card.start_date') }}</span>
         <span class="font-bold">{{ params.created_at }}</span>
 
-        <template v-if="dtComponent.viewMode == 'archived'">
+        <template v-if="dtComponent.currentViewMode == 'archived'">
           <span class="text-sn-dark-grey">{{ i18n.t('experiments.card.archived_date') }}</span>
           <span class="font-bold">{{ params.archived_on }}</span>
         </template>
diff --git a/app/javascript/vue/shared/select_dropdown.vue b/app/javascript/vue/shared/select_dropdown.vue
index c92217b4a..0c15f04c2 100644
--- a/app/javascript/vue/shared/select_dropdown.vue
+++ b/app/javascript/vue/shared/select_dropdown.vue
@@ -1,11 +1,16 @@
 <template>
-  <div v-click-outside="close" class="w-full">
+  <div v-click-outside="close"
+       @focus="open"
+       @keydown="keySelectOptions($event)"
+       tabindex="0" class="w-full focus:outline-none "
+  >
     <div
       ref="field"
-      class="px-3 py-1 border border-solid border-sn-light-grey rounded flex items-center cursor-pointer"
+      class="px-3 py-1 border border-solid rounded flex items-center cursor-pointer"
       @click="open"
       :class="[sizeClass, {
-        'border-sn-blue': isOpen,
+        '!border-sn-blue': isOpen,
+        '!border-sn-light-grey': !isOpen,
         'bg-sn-sleepy-grey': disabled
       }]"
     >
@@ -53,7 +58,7 @@
                     fixed z-[3000]">
           <div v-if="multiple && withCheckboxes" class="p-2.5 pb-0">
             <div @click="selectAll" :class="sizeClass"
-                class="border-x-0 border-transparent border-solid border-b-sn-light-grey
+                class="border border-x-0 !border-transparent border-solid !border-b-sn-light-grey
                         py-1.5 px-3  cursor-pointer flex items-center gap-2 shrink-0">
               <div class="sn-checkbox-icon"
                   :class="selectAllState"
@@ -62,11 +67,15 @@
             </div>
           </div>
           <perfect-scrollbar class="p-2.5 flex flex-col max-h-80 relative" :class="{ 'pt-0': withCheckboxes }">
-            <template v-for="option in filteredOptions" :key="option[0]">
+            <template v-for="(option, i) in filteredOptions" :key="option[0]">
               <div
                 @click.stop="setValue(option[0])"
+                ref="options"
                 class="py-1.5 px-3 rounded cursor-pointer flex items-center gap-2 shrink-0"
-                :class="[sizeClass, {'!bg-sn-super-light-blue': valueSelected(option[0])}]"
+                :class="[sizeClass, {
+                  '!bg-sn-super-light-blue': valueSelected(option[0]) && focusedOption !== i,
+                  '!bg-sn-super-light-grey': focusedOption === i ,
+                }]"
               >
                 <div v-if="withCheckboxes"
                     class="sn-checkbox-icon shrink-0"
@@ -117,7 +126,7 @@ export default {
     urlParams: { type: Object, default: () => ({}) }
   },
   directives: {
-    'click-outside': vOnClickOutside,
+    'click-outside': vOnClickOutside
   },
   data() {
     return {
@@ -127,6 +136,7 @@ export default {
       selectAllState: 'unchecked',
       query: '',
       fixedWidth: true,
+      focusedOption: null
     };
   },
   mixins: [FixedFlyoutMixin],
@@ -331,6 +341,25 @@ export default {
       }
       return true;
     },
-  },
+    keySelectOptions(e) {
+      if (e.key !== 'Tab') {
+        e.stopPropagation();
+        e.preventDefault();
+      } else {
+        this.close();
+      }
+
+      if (e.key === 'ArrowDown') {
+        this.focusedOption = this.focusedOption === null ? 0 : this.focusedOption + 1;
+        if (this.focusedOption > this.$refs.options.length - 1) this.focusedOption = 0;
+      } else if (e.key === 'ArrowUp') {
+        this.focusedOption = (this.focusedOption || this.$refs.options.length) - 1;
+        if (this.focusedOption < 0) this.focusedOption = this.$refs.options.length - 1;
+      } else if (e.key === 'Enter' && this.focusedOption !== null) {
+        this.setValue(this.filteredOptions[this.focusedOption][0]);
+      }
+      this.$refs.options[this.focusedOption]?.scrollIntoView({ block: 'nearest' });
+    }
+  }
 };
 </script>