fix: fix tags keyboard navigation

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">

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

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">

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"