fix: tag autocomplete result not clickable on iOS (#1455)

standardnotes · Aug 29, 2022 · 876c0e8 · 876c0e8
1 parent a203faf
commit 876c0e8
Showing 1 changed file with 7 additions and 3 deletions.
diff --git 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) => (