🐛Autocomplete: Added a workaround for touch crash (#3005)

* 🐛Autocomplete: Added a workaround for touch crash * update snapshot
equinor · Aug 14, 2023 · dc8c22f · dc8c22f
1 parent bc2f4a8
commit dc8c22f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/packages/eds-core-react/src/components/Autocomplete/Option.tsx b/packages/eds-core-react/src/components/Autocomplete/Option.tsx
@@ -27,6 +27,7 @@ const StyledListItem = styled.li<StyledListItemType>(
       background-color: ${backgroundColor};
       user-select: none;
       overflow: hidden;
+      touch-action: manipulation;
       cursor: ${highlighted === 'true' ? 'pointer' : 'default'};
       ${typographyTemplate(theme.typography)}
       ${spacingsTemplate(theme.spacings)}
@@ -80,7 +81,12 @@ function AutocompleteOptionInner<T>(
       isdisabled={isDisabled ? 'true' : 'false'}
       aria-hidden={isDisabled}
       active={!multiple && isSelected ? 'true' : 'false'}
-      onClick={(e) => !isDisabled && onClick(e)}
+      onClick={(e) => {
+        //timeout: workaround for "Maximum update depth exceeded" error that happens when touch input
+        setTimeout(() => {
+          !isDisabled && onClick(e)
+        }, 0)
+      }}
       aria-selected={multiple ? isSelected : ariaSelected}
       {...other}
     >

diff --git a/packages/eds-core-react/src/components/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap b/packages/eds-core-react/src/components/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap
@@ -32,6 +32,7 @@ exports[`Autocomplete Matches snapshot 1`] = `
   -ms-user-select: none;
   user-select: none;
   overflow: hidden;
+  touch-action: manipulation;
   cursor: default;
   margin: 0;
   color: var(--eds_text__static_icons__default,rgba(61,61,61,1));