From 70e4425e20a3dc0334e56646c8146a12851876ca Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Mon, 31 May 2021 14:42:03 -0300
Subject: [PATCH] feat: set tabindex depending on overflowed tags

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

diff --git a/app/assets/javascripts/components/AutocompleteTagInput.tsx b/app/assets/javascripts/components/AutocompleteTagInput.tsx
index 2417e804f..413b85c42 100644
--- a/app/assets/javascripts/components/AutocompleteTagInput.tsx
+++ b/app/assets/javascripts/components/AutocompleteTagInput.tsx
@@ -11,12 +11,14 @@ type Props = {
   application: WebApplication;
   appState: AppState;
   tagsRef: RefObject<HTMLButtonElement[]>;
+  tabIndex: number;
 };
 
 export const AutocompleteTagInput: FunctionalComponent<Props> = ({
   application,
   appState,
   tagsRef,
+  tabIndex,
 }) => {
   const [searchQuery, setSearchQuery] = useState('');
   const [dropdownVisible, setDropdownVisible] = useState(false);
@@ -102,6 +104,7 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
           onChange={onSearchQueryChange}
           type="text"
           placeholder="Add tag"
+          tabIndex={tabIndex}
           onBlur={closeOnBlur}
           onFocus={showDropdown}
           onKeyUp={(event) => {
diff --git a/app/assets/javascripts/components/NoteTags.tsx b/app/assets/javascripts/components/NoteTags.tsx
index 3c2e2e4ba..4c34c40d4 100644
--- a/app/assets/javascripts/components/NoteTags.tsx
+++ b/app/assets/javascripts/components/NoteTags.tsx
@@ -99,6 +99,8 @@ const NoteTags = observer(({ application, appState }: Props) => {
   const tagClass = `bg-contrast border-0 rounded text-xs color-text py-1 pr-2 flex items-center 
     mt-2 mr-2 cursor-pointer hover:bg-secondary-contrast focus:bg-secondary-contrast`;
 
+  const overflowedTags = tagsContainerCollapsed && overflowCount > 0;
+
   return (
     <div className="flex" style={{ height: tagsContainerHeight }}>
       <div
@@ -126,6 +128,7 @@ const NoteTags = observer(({ application, appState }: Props) => {
                 onTagBackspacePress(tag);
               }
             }}
+            tabIndex={isTagOverflowed(tagsRef.current[index]) ? -1 : 0}
           >
             <Icon
               type="hashtag"
@@ -140,6 +143,7 @@ const NoteTags = observer(({ application, appState }: Props) => {
           application={application}
           appState={appState}
           tagsRef={tagsRef}
+          tabIndex={overflowedTags ? -1 : 0}
         />
       </div>
       {overflowCount > 1 && tagsContainerCollapsed && (