diff --git a/packages/eds-core-react/src/components/Autocomplete/Option.tsx b/packages/eds-core-react/src/components/Autocomplete/Option.tsx index f4b53b6a01..6e29f26e0c 100644 --- 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( 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( 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 index 1554eadd68..8babbc7493 100644 --- 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));