feat: focus last tag when pressing backspace on input

standardnotes · May 26, 2021 · d6f1cc3 · d6f1cc3
1 parent 90cc806
commit d6f1cc3
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/app/assets/javascripts/components/AutocompleteTagInput.tsx b/app/assets/javascripts/components/AutocompleteTagInput.tsx
@@ -1,6 +1,6 @@
 import { WebApplication } from '@/ui_models/application';
 import { SNTag } from '@standardnotes/snjs';
-import { FunctionalComponent } from 'preact';
+import { FunctionalComponent, RefObject } from 'preact';
 import { useRef, useState } from 'preact/hooks';
 import { Icon } from './Icon';
 import { Disclosure, DisclosurePanel } from '@reach/disclosure';
@@ -10,11 +10,13 @@ import { AppState } from '@/ui_models/app_state';
 type Props = {
   application: WebApplication;
   appState: AppState;
+  lastTagRef: RefObject<HTMLButtonElement>;
 };
 
 export const AutocompleteTagInput: FunctionalComponent<Props> = ({
   application,
   appState,
+  lastTagRef,
 }) => {
   const [searchQuery, setSearchQuery] = useState('');
   const [dropdownVisible, setDropdownVisible] = useState(false);
@@ -92,6 +94,11 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
           type="text"
           onBlur={closeOnBlur}
           onFocus={showDropdown}
+          onKeyUp={(event) => {
+            if (event.key === 'Backspace') {
+              lastTagRef.current?.focus();
+            }
+          }}
         />
         {dropdownVisible && (
           <DisclosurePanel

diff --git a/app/assets/javascripts/components/NoteTags.tsx b/app/assets/javascripts/components/NoteTags.tsx
@@ -4,25 +4,30 @@ import { toDirective } from './utils';
 import { Icon } from './Icon';
 import { AutocompleteTagInput } from './AutocompleteTagInput';
 import { WebApplication } from '@/ui_models/application';
+import { useRef } from 'preact/hooks';
 
 type Props = {
   application: WebApplication;
   appState: AppState;
 };
 
 const NoteTags = observer(({ application, appState }: Props) => {
+  const { activeNoteTags } = appState.notes;
+  const lastTagRef = useRef<HTMLButtonElement>();
+
   return (
     <div className="flex flex-wrap">
-      {appState.notes.activeNoteTags.map((tag) => (
+      {activeNoteTags.map((tag, index) => (
         <button
           className={`bg-contrast border-0 rounded text-xs color-text p-1 flex items-center 
             mt-2 mr-2 cursor-pointer hover:bg-secondary-contrast focus:bg-secondary-contrast`}
+          ref={index === activeNoteTags.length - 1 ? lastTagRef : undefined}
         >
           <Icon type="hashtag" className="sn-icon--small color-neutral mr-1" />
           {tag.title}
         </button>
       ))}
-      <AutocompleteTagInput application={application} appState={appState} />
+      <AutocompleteTagInput application={application} appState={appState} lastTagRef={lastTagRef} />
     </div>
   );
 });