fix: don't clear search query when navigating back to input

standardnotes · Jul 1, 2021 · 353d46e · 353d46e
1 parent 3e76ef6
commit 353d46e
Showing 1 changed file with 58 additions and 46 deletions.
diff --git 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>
   );
 });