From 3e76ef6b6f3fa0bc0174dc83d3a1e8baed69bbd8 Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Thu, 1 Jul 2021 14:36:21 -0300
Subject: [PATCH] fix: fix tags keyboard navigation

---
 .../components/AutocompleteTagHint.tsx            |  1 +
 .../components/AutocompleteTagInput.tsx           |  2 +-
 .../components/AutocompleteTagResult.tsx          |  1 +
 app/assets/javascripts/components/NoteTag.tsx     | 15 +++++++++++++--
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/components/AutocompleteTagHint.tsx b/app/assets/javascripts/components/AutocompleteTagHint.tsx
index 00cc04af7..bbb1ec928 100644
--- a/app/assets/javascripts/components/AutocompleteTagHint.tsx
+++ b/app/assets/javascripts/components/AutocompleteTagHint.tsx
@@ -62,6 +62,7 @@ export const AutocompleteTagHint = observer(
           onFocus={onFocus}
           onBlur={onBlur}
           onKeyDown={onKeyDown}
+          tabIndex={-1}
         >
           <span>Create new tag:</span>
           <span className="bg-contrast rounded text-xs color-text py-1 pl-1 pr-2 flex items-center ml-2">
diff --git a/app/assets/javascripts/components/AutocompleteTagInput.tsx b/app/assets/javascripts/components/AutocompleteTagInput.tsx
index 2dddf3077..e3771024d 100644
--- a/app/assets/javascripts/components/AutocompleteTagInput.tsx
+++ b/app/assets/javascripts/components/AutocompleteTagInput.tsx
@@ -92,7 +92,6 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
   useEffect(() => {
     if (autocompleteInputFocused) {
       inputRef.current.focus();
-      appState.noteTags.setAutocompleteInputFocused(false);
     }
   }, [appState.noteTags, autocompleteInputFocused]);
 
@@ -113,6 +112,7 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
           onBlur={onBlur}
           onFocus={onFocus}
           onKeyDown={onKeyDown}
+          tabIndex={tags.length === 0 ? 0 : -1}
         />
         {dropdownVisible && (autocompleteTagResults.length > 0 || autocompleteTagHintVisible) && (
           <DisclosurePanel
diff --git a/app/assets/javascripts/components/AutocompleteTagResult.tsx b/app/assets/javascripts/components/AutocompleteTagResult.tsx
index 0a7cf9cb8..672d5e72c 100644
--- a/app/assets/javascripts/components/AutocompleteTagResult.tsx
+++ b/app/assets/javascripts/components/AutocompleteTagResult.tsx
@@ -82,6 +82,7 @@ export const AutocompleteTagResult = observer(
         onFocus={onFocus}
         onBlur={onBlur}
         onKeyDown={onKeyDown}
+        tabIndex={-1}
       >
         <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 f08c94ef8..ba80ebe48 100644
--- a/app/assets/javascripts/components/NoteTag.tsx
+++ b/app/assets/javascripts/components/NoteTag.tsx
@@ -10,7 +10,7 @@ type Props = {
 };
 
 export const NoteTag = observer(({ appState, tag }: Props) => {
-  const { focusedTagUuid, tags } = appState.noteTags;
+  const { autocompleteInputFocused, focusedTagUuid, tags } = appState.noteTags;
 
   const [showDeleteButton, setShowDeleteButton] = useState(false);
   const [tagClicked, setTagClicked] = useState(false);
@@ -51,6 +51,16 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
     }
   };
 
+  const getTabIndex = () => {
+    if (focusedTagUuid) {
+      return focusedTagUuid === tag.uuid ? 0 : -1;
+    } 
+    if (autocompleteInputFocused) {
+      return -1;
+    }
+    return tags[0].uuid === tag.uuid ? 0 : -1;
+  };
+
   const onKeyDown = (event: KeyboardEvent) => {
     const tagIndex = appState.noteTags.getTagIndex(tag, tags);
     switch (event.key) {
@@ -75,7 +85,6 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
   useEffect(() => {
     if (focusedTagUuid === tag.uuid) {
       tagRef.current.focus();
-      appState.noteTags.setFocusedTagUuid(undefined);
     }
   }, [appState.noteTags, focusedTagUuid, tag]);
 
@@ -87,6 +96,7 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
       onKeyDown={onKeyDown}
       onFocus={onFocus}
       onBlur={onBlur}
+      tabIndex={getTabIndex()}
     >
       <Icon type="hashtag" className="sn-icon--small color-info mr-1" />
       <span className="whitespace-nowrap overflow-hidden overflow-ellipsis max-w-290px">
@@ -99,6 +109,7 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
           className="ml-2 -mr-1 border-0 p-0 bg-transparent cursor-pointer flex"
           onBlur={onBlur}
           onClick={onDeleteTagClick}
+          tabIndex={-1}
         >
           <Icon
             type="close"