From d6f1cc3730a6ff01cb844637406a411df01728db Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Wed, 26 May 2021 17:38:20 -0300
Subject: [PATCH] feat: focus last tag when pressing backspace on input

---
 .../javascripts/components/AutocompleteTagInput.tsx      | 9 ++++++++-
 app/assets/javascripts/components/NoteTags.tsx           | 9 +++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/components/AutocompleteTagInput.tsx b/app/assets/javascripts/components/AutocompleteTagInput.tsx
index 9ae7e7ca5..0150834d1 100644
--- 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
index 2c32909cc..6c4390dc0 100644
--- a/app/assets/javascripts/components/NoteTags.tsx
+++ b/app/assets/javascripts/components/NoteTags.tsx
@@ -4,6 +4,7 @@ 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;
@@ -11,18 +12,22 @@ type Props = {
 };
 
 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>
   );
 });