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 1/2] 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"

From 353d46eb633bda2c08c84acae961cf5b5548486c Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Thu, 1 Jul 2021 14:36:56 -0300
Subject: [PATCH 2/2] fix: don't clear search query when navigating back to
 input

---
 .../components/AutocompleteTagInput.tsx       | 104 ++++++++++--------
 1 file changed, 58 insertions(+), 46 deletions(-)

diff --git a/app/assets/javascripts/components/AutocompleteTagInput.tsx b/app/assets/javascripts/components/AutocompleteTagInput.tsx
index e3771024d..80c865f39 100644
--- a/app/assets/javascripts/components/AutocompleteTagInput.tsx
+++ b/app/assets/javascripts/components/AutocompleteTagInput.tsx
@@ -25,10 +25,10 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
   const [dropdownMaxHeight, setDropdownMaxHeight] =
     useState<number | 'auto'>('auto');
 
-  const dropdownRef = useRef<HTMLDivElement>();
+  const containerRef = useRef<HTMLDivElement>();
   const inputRef = useRef<HTMLInputElement>();
 
-  const [closeOnBlur] = useCloseOnBlur(dropdownRef, (visible: boolean) => {
+  const [closeOnBlur] = useCloseOnBlur(containerRef, (visible: boolean) => {
     setDropdownVisible(visible);
     appState.noteTags.clearAutocompleteSearch();
   });
@@ -69,7 +69,9 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
       case 'ArrowDown':
         event.preventDefault();
         if (autocompleteTagResults.length > 0) {
-          appState.noteTags.setFocusedTagResultUuid(autocompleteTagResults[0].uuid);
+          appState.noteTags.setFocusedTagResultUuid(
+            autocompleteTagResults[0].uuid
+          );
         } else if (autocompleteTagHintVisible) {
           appState.noteTags.setAutocompleteTagHintFocused(true);
         }
@@ -96,50 +98,60 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
   }, [appState.noteTags, autocompleteInputFocused]);
 
   return (
-    <form
-      onSubmit={onFormSubmit}
-      className={`${tags.length > 0 ? 'mt-2' : ''}`}
-    >
-      <Disclosure open={dropdownVisible} onChange={showDropdown}>
-        <input
-          ref={inputRef}
-          className={`${tags.length > 0 ? 'w-80' : 'w-70 mr-10'} bg-transparent text-xs
+    <div ref={containerRef}>
+      <form
+        onSubmit={onFormSubmit}
+        className={`${tags.length > 0 ? 'mt-2' : ''}`}
+      >
+        <Disclosure open={dropdownVisible} onChange={showDropdown}>
+          <input
+            ref={inputRef}
+            className={`${
+              tags.length > 0 ? 'w-80' : 'w-70 mr-10'
+            } bg-transparent text-xs
             color-text no-border h-7 focus:outline-none focus:shadow-none focus:border-bottom`}
-          value={autocompleteSearchQuery}
-          onChange={onSearchQueryChange}
-          type="text"
-          placeholder="Add tag"
-          onBlur={onBlur}
-          onFocus={onFocus}
-          onKeyDown={onKeyDown}
-          tabIndex={tags.length === 0 ? 0 : -1}
-        />
-        {dropdownVisible && (autocompleteTagResults.length > 0 || autocompleteTagHintVisible) && (
-          <DisclosurePanel
-            ref={dropdownRef}
-            className={`${tags.length > 0 ? 'w-80' : 'w-70 mr-10'} sn-dropdown flex flex-col py-2 absolute`}
-            style={{ maxHeight: dropdownMaxHeight, maxWidth: tagsContainerMaxWidth }}
-            onBlur={closeOnBlur}
-          >
-            <div className="overflow-y-auto">
-              {autocompleteTagResults.map((tagResult: SNTag) => (
-                <AutocompleteTagResult
-                  key={tagResult.uuid}
-                  appState={appState}
-                  tagResult={tagResult}
-                  closeOnBlur={closeOnBlur}
-                />
-              ))}
-            </div>
-            {autocompleteTagHintVisible && (
-              <AutocompleteTagHint
-                appState={appState}
-                closeOnBlur={closeOnBlur}
-              />
+            value={autocompleteSearchQuery}
+            onChange={onSearchQueryChange}
+            type="text"
+            placeholder="Add tag"
+            onBlur={onBlur}
+            onFocus={onFocus}
+            onKeyDown={onKeyDown}
+            tabIndex={tags.length === 0 ? 0 : -1}
+          />
+          {dropdownVisible &&
+            (autocompleteTagResults.length > 0 ||
+              autocompleteTagHintVisible) && (
+              <DisclosurePanel
+                className={`${
+                  tags.length > 0 ? 'w-80' : 'w-70 mr-10'
+                } sn-dropdown flex flex-col py-2 absolute`}
+                style={{
+                  maxHeight: dropdownMaxHeight,
+                  maxWidth: tagsContainerMaxWidth,
+                }}
+                onBlur={closeOnBlur}
+              >
+                <div className="overflow-y-auto">
+                  {autocompleteTagResults.map((tagResult: SNTag) => (
+                    <AutocompleteTagResult
+                      key={tagResult.uuid}
+                      appState={appState}
+                      tagResult={tagResult}
+                      closeOnBlur={closeOnBlur}
+                    />
+                  ))}
+                </div>
+                {autocompleteTagHintVisible && (
+                  <AutocompleteTagHint
+                    appState={appState}
+                    closeOnBlur={closeOnBlur}
+                  />
+                )}
+              </DisclosurePanel>
             )}
-          </DisclosurePanel>
-        )}
-      </Disclosure>
-    </form>
+        </Disclosure>
+      </form>
+    </div>
   );
 });