From 31d454cdc52468276e4538b6ff33c1acc79d539d Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Thu, 3 Jun 2021 14:21:07 -0300
Subject: [PATCH] feat: add arrow key navigation for results dropdown

---
 .../components/AutocompleteTagInput.tsx       | 45 +++++++++++++------
 .../components/AutocompleteTagResult.tsx      | 23 +++++++++-
 app/assets/javascripts/components/NoteTag.tsx | 13 ++----
 .../javascripts/components/NotesOptions.tsx   |  4 +-
 .../components/NotesOptionsPanel.tsx          |  4 +-
 .../ui_models/app_state/note_tags_state.ts    | 37 ++++++++++++++-
 6 files changed, 97 insertions(+), 29 deletions(-)

diff --git a/app/assets/javascripts/components/AutocompleteTagInput.tsx b/app/assets/javascripts/components/AutocompleteTagInput.tsx
index f887d0d0a..247b8375d 100644
--- a/app/assets/javascripts/components/AutocompleteTagInput.tsx
+++ b/app/assets/javascripts/components/AutocompleteTagInput.tsx
@@ -15,6 +15,8 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
     autocompleteSearchQuery,
     autocompleteTagHintVisible,
     autocompleteTagResults,
+    autocompleteTagResultElements,
+    autocompleteInputElement,
     tagElements,
     tags,
   } = appState.noteTags;
@@ -23,7 +25,6 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
   const [dropdownMaxHeight, setDropdownMaxHeight] =
     useState<number | 'auto'>('auto');
 
-  const inputRef = useRef<HTMLInputElement>();
   const dropdownRef = useRef<HTMLDivElement>();
 
   const [closeOnBlur] = useCloseOnBlur(dropdownRef, (visible: boolean) => {
@@ -32,9 +33,11 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
   });
 
   const showDropdown = () => {
-    const { clientHeight } = document.documentElement;
-    const inputRect = inputRef.current.getBoundingClientRect();
-    setDropdownMaxHeight(clientHeight - inputRect.bottom - 32 * 2);
+    if (autocompleteInputElement) {
+      const { clientHeight } = document.documentElement;
+      const inputRect = autocompleteInputElement.getBoundingClientRect();
+      setDropdownMaxHeight(clientHeight - inputRect.bottom - 32 * 2);
+    }
     setDropdownVisible(true);
   };
 
@@ -49,6 +52,24 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
     await appState.noteTags.createAndAddNewTag();
   };
 
+  const onKeyDown = (event: KeyboardEvent) => {
+    switch (event.key) {
+      case 'Backspace':
+        if (autocompleteSearchQuery === '' && tagElements.length > 0) {
+          tagElements[tagElements.length - 1]?.focus();
+        }
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        if (autocompleteTagResultElements.length > 0) {
+          autocompleteTagResultElements[0]?.focus();
+        }
+        break;
+      default:
+        return;
+    }
+  };
+
   useEffect(() => {
     appState.noteTags.searchActiveNoteAutocompleteTags();
   }, [appState.noteTags]);
@@ -60,7 +81,11 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
     >
       <Disclosure open={dropdownVisible} onChange={showDropdown}>
         <input
-          ref={inputRef}
+          ref={(element) => {
+            if (element) {
+              appState.noteTags.setAutocompleteInputElement(element);
+            }
+          }}
           className="w-80 bg-default text-xs color-text no-border h-7 focus:outline-none focus:shadow-none focus:border-bottom"
           value={autocompleteSearchQuery}
           onChange={onSearchQueryChange}
@@ -68,15 +93,7 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
           placeholder="Add tag"
           onBlur={closeOnBlur}
           onFocus={showDropdown}
-          onKeyUp={(event) => {
-            if (
-              event.key === 'Backspace' &&
-              autocompleteSearchQuery === '' &&
-              tagElements.length > 0
-            ) {
-              tagElements[tagElements.length - 1]?.focus();
-            }
-          }}
+          onKeyDown={onKeyDown}
         />
         {dropdownVisible && (
           <DisclosurePanel
diff --git a/app/assets/javascripts/components/AutocompleteTagResult.tsx b/app/assets/javascripts/components/AutocompleteTagResult.tsx
index ae31932eb..4dd36aab0 100644
--- a/app/assets/javascripts/components/AutocompleteTagResult.tsx
+++ b/app/assets/javascripts/components/AutocompleteTagResult.tsx
@@ -11,13 +11,33 @@ type Props = {
 
 export const AutocompleteTagResult = observer(
   ({ appState, tagResult, closeOnBlur }: Props) => {
-    const { autocompleteSearchQuery } = appState.noteTags;
+    const { autocompleteInputElement, autocompleteSearchQuery, autocompleteTagResults } = appState.noteTags;
 
     const onTagOptionClick = async (tag: SNTag) => {
       await appState.noteTags.addTagToActiveNote(tag);
       appState.noteTags.clearAutocompleteSearch();
     };
 
+    const onKeyDown = (event: KeyboardEvent) => {
+      const tagResultIndex = appState.noteTags.getTagIndex(tagResult, autocompleteTagResults);
+      switch (event.key) {
+        case 'ArrowUp':
+          event.preventDefault();
+          if (tagResultIndex === 0) {
+            autocompleteInputElement?.focus();
+          } else {
+            appState.noteTags.getPreviousAutocompleteTagResultElement(tagResult)?.focus();
+          }
+          break;
+        case 'ArrowDown':
+          event.preventDefault();
+          appState.noteTags.getNextAutocompleteTagResultElement(tagResult)?.focus();
+          break;
+        default:
+          return;
+      }
+    };
+
     return (
       <button
         ref={(element) => {
@@ -32,6 +52,7 @@ export const AutocompleteTagResult = observer(
         className="sn-dropdown-item"
         onClick={() => onTagOptionClick(tagResult)}
         onBlur={closeOnBlur}
+        onKeyDown={onKeyDown}
       >
         <Icon type="hashtag" className="color-neutral mr-2 min-h-5 min-w-5" />
         <span className="whitespace-nowrap overflow-hidden overflow-ellipsis">
diff --git a/app/assets/javascripts/components/NoteTag.tsx b/app/assets/javascripts/components/NoteTag.tsx
index 36b272fb1..455a35511 100644
--- a/app/assets/javascripts/components/NoteTag.tsx
+++ b/app/assets/javascripts/components/NoteTag.tsx
@@ -34,21 +34,16 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
     }
   };
 
-  const onKeyUp = (event: KeyboardEvent) => {
-    let previousTagElement;
-    let nextTagElement;
-
+  const onKeyDown = (event: KeyboardEvent) => {
     switch (event.key) {
       case 'Backspace':
         deleteTag();
         break;
       case 'ArrowLeft':
-        previousTagElement = appState.noteTags.getPreviousTagElement(tag);
-        previousTagElement?.focus();
+        appState.noteTags.getPreviousTagElement(tag)?.focus();
         break;
       case 'ArrowRight':
-        nextTagElement = appState.noteTags.getNextTagElement(tag);
-        nextTagElement?.focus();
+        appState.noteTags.getNextTagElement(tag)?.focus();
         break;
       default:
         return;
@@ -65,7 +60,7 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
       className="sn-tag pl-1 pr-2 mr-2"
       style={{ maxWidth: tagsContainerMaxWidth }}
       onClick={onTagClick}
-      onKeyUp={onKeyUp}
+      onKeyDown={onKeyDown}
       onFocus={onFocus}
       onBlur={onBlur}
     >
diff --git a/app/assets/javascripts/components/NotesOptions.tsx b/app/assets/javascripts/components/NotesOptions.tsx
index 953603cc5..9b44b0ab6 100644
--- a/app/assets/javascripts/components/NotesOptions.tsx
+++ b/app/assets/javascripts/components/NotesOptions.tsx
@@ -133,7 +133,7 @@ export const NotesOptions = observer(
         {appState.tags.tagsCount > 0 && (
           <Disclosure open={tagsMenuOpen} onChange={openTagsMenu}>
             <DisclosureButton
-              onKeyUp={(event) => {
+              onKeyDown={(event) => {
                 if (event.key === 'Escape') {
                   setTagsMenuOpen(false);
                 }
@@ -149,7 +149,7 @@ export const NotesOptions = observer(
               <Icon type="chevron-right" className="color-neutral" />
             </DisclosureButton>
             <DisclosurePanel
-              onKeyUp={(event) => {
+              onKeyDown={(event) => {
                 if (event.key === 'Escape') {
                   setTagsMenuOpen(false);
                   tagsButtonRef.current.focus();
diff --git a/app/assets/javascripts/components/NotesOptionsPanel.tsx b/app/assets/javascripts/components/NotesOptionsPanel.tsx
index d9dea3b72..050ce0db7 100644
--- a/app/assets/javascripts/components/NotesOptionsPanel.tsx
+++ b/app/assets/javascripts/components/NotesOptionsPanel.tsx
@@ -47,7 +47,7 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => {
       }}
     >
       <DisclosureButton
-        onKeyUp={(event) => {
+        onKeyDown={(event) => {
           if (event.key === 'Escape' && !submenuOpen) {
             setOpen(false);
           }
@@ -60,7 +60,7 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => {
         <Icon type="more" className="block" />
       </DisclosureButton>
         <DisclosurePanel
-          onKeyUp={(event) => {
+          onKeyDown={(event) => {
             if (event.key === 'Escape' && !submenuOpen) {
               setOpen(false);
               buttonRef.current.focus();
diff --git a/app/assets/javascripts/ui_models/app_state/note_tags_state.ts b/app/assets/javascripts/ui_models/app_state/note_tags_state.ts
index efa8c8471..0142f2338 100644
--- a/app/assets/javascripts/ui_models/app_state/note_tags_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/note_tags_state.ts
@@ -4,6 +4,7 @@ import { WebApplication } from '../application';
 import { AppState } from './app_state';
 
 export class NoteTagsState {
+  autocompleteInputElement: HTMLInputElement | undefined = undefined;
   autocompleteSearchQuery = '';
   autocompleteTagResultElements: (HTMLButtonElement | undefined)[] = [];
   autocompleteTagResults: SNTag[] = [];
@@ -17,6 +18,7 @@ export class NoteTagsState {
     appEventListeners: (() => void)[]
   ) {
     makeObservable(this, {
+      autocompleteInputElement: observable,
       autocompleteSearchQuery: observable,
       autocompleteTagResultElements: observable,
       autocompleteTagResults: observable,
@@ -27,6 +29,7 @@ export class NoteTagsState {
       autocompleteTagHintVisible: computed,
 
       clearAutocompleteSearch: action,
+      setAutocompleteInputElement: action,
       setAutocompleteSearchQuery: action,
       setAutocompleteTagResultElement: action,
       setAutocompleteTagResultElements: action,
@@ -58,6 +61,10 @@ export class NoteTagsState {
     );
   }
 
+  setAutocompleteInputElement(element: HTMLInputElement | undefined): void {
+    this.autocompleteInputElement = element;
+  }
+
   setAutocompleteSearchQuery(query: string): void {
     this.autocompleteSearchQuery = query;
   }
@@ -107,7 +114,9 @@ export class NoteTagsState {
   }
 
   async createAndAddNewTag(): Promise<void> {
-    const newTag = await this.application.findOrCreateTag(this.autocompleteSearchQuery);
+    const newTag = await this.application.findOrCreateTag(
+      this.autocompleteSearchQuery
+    );
     await this.addTagToActiveNote(newTag);
     this.clearAutocompleteSearch();
   }
@@ -138,6 +147,32 @@ export class NoteTagsState {
     }
   }
 
+  getPreviousAutocompleteTagResultElement(
+    tagResult: SNTag
+  ): HTMLButtonElement | undefined {
+    const previousTagIndex =
+      this.getTagIndex(tagResult, this.autocompleteTagResults) - 1;
+    if (
+      previousTagIndex > -1 &&
+      this.autocompleteTagResultElements.length > previousTagIndex
+    ) {
+      return this.autocompleteTagResultElements[previousTagIndex];
+    }
+  }
+
+  getNextAutocompleteTagResultElement(
+    tagResult: SNTag
+  ): HTMLButtonElement | undefined {
+    const nextTagIndex =
+      this.getTagIndex(tagResult, this.autocompleteTagResults) + 1;
+    if (
+      nextTagIndex > -1 &&
+      this.autocompleteTagResultElements.length > nextTagIndex
+    ) {
+      return this.autocompleteTagResultElements[nextTagIndex];
+    }
+  }
+
   reloadTags(): void {
     const { activeNote } = this;
     if (activeNote) {