From 876c0e83ca52d918854601b4929259711cc9a5eb Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 29 Aug 2022 20:00:42 +0530
Subject: [PATCH] fix: tag autocomplete result not clickable on iOS (#1455)

---
 .../TagAutocomplete/AutocompleteTagInput.tsx           | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/javascripts/Components/TagAutocomplete/AutocompleteTagInput.tsx b/packages/web/src/javascripts/Components/TagAutocomplete/AutocompleteTagInput.tsx
index 23864de41..c70296089 100644
--- a/packages/web/src/javascripts/Components/TagAutocomplete/AutocompleteTagInput.tsx
+++ b/packages/web/src/javascripts/Components/TagAutocomplete/AutocompleteTagInput.tsx
@@ -14,6 +14,8 @@ import AutocompleteTagResult from './AutocompleteTagResult'
 import AutocompleteTagHint from './AutocompleteTagHint'
 import { observer } from 'mobx-react-lite'
 import { SNTag } from '@standardnotes/snjs'
+import { classNames } from '@/Utils/ConcatenateClassNames'
+import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 
 type Props = {
   viewControllerManager: ViewControllerManager
@@ -123,14 +125,16 @@ const AutocompleteTagInput = ({ viewControllerManager }: Props) => {
           />
           {dropdownVisible && (autocompleteTagResults.length > 0 || autocompleteTagHintVisible) && (
             <DisclosurePanel
-              className={`${
-                tags.length > 0 ? 'w-80' : 'mr-10 w-70'
-              } absolute flex flex-col rounded bg-default py-2 shadow-main`}
+              className={classNames(
+                tags.length > 0 ? 'w-80' : 'mr-10 w-70',
+                'absolute z-dropdown-menu flex flex-col rounded bg-default py-2 shadow-main',
+              )}
               style={{
                 maxHeight: dropdownMaxHeight,
                 maxWidth: tagsContainerMaxWidth,
               }}
               onBlur={closeOnBlur}
+              tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
             >
               <div className="md:overflow-y-auto">
                 {autocompleteTagResults.map((tagResult: SNTag) => (