From 7fd5a8db723a2069233c3570721b9105aa9056e1 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Tue, 4 Feb 2020 23:54:59 +0100
Subject: [PATCH] UX: adds arrow navigation support to mini-tag-chooser (#8857)

---
 .../components/mini-tag-chooser.js.es6        | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/app/assets/javascripts/select-kit/components/mini-tag-chooser.js.es6 b/app/assets/javascripts/select-kit/components/mini-tag-chooser.js.es6
index 6284181bbeb..90ef12c7058 100644
--- a/app/assets/javascripts/select-kit/components/mini-tag-chooser.js.es6
+++ b/app/assets/javascripts/select-kit/components/mini-tag-chooser.js.es6
@@ -165,8 +165,30 @@ export default ComboBox.extend(TagsMixin, {
   },
 
   _onKeydown(event) {
+    const value = makeArray(this.value);
+
     if (event.keyCode === 8) {
       this._onBackspace(this.value, this.highlightedTag);
+    } else if (event.keyCode === 37) {
+      if (this.highlightedTag) {
+        const index = value.indexOf(this.highlightedTag);
+        const highlightedTag = value[index - 1]
+          ? value[index - 1]
+          : value.lastObject;
+        this.set("highlightedTag", highlightedTag);
+      } else {
+        this.set("highlightedTag", value.lastObject);
+      }
+    } else if (event.keyCode === 39) {
+      if (this.highlightedTag) {
+        const index = value.indexOf(this.highlightedTag);
+        const highlightedTag = value[index + 1]
+          ? value[index + 1]
+          : value.firstObject;
+        this.set("highlightedTag", highlightedTag);
+      } else {
+        this.set("highlightedTag", value.firstObject);
+      }
     } else {
       this.set("highlightedTag", null);
     }