diff --git a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx index f86fb0583f..9d4c77cffb 100644 --- a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx +++ b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx @@ -68,6 +68,10 @@ const StyledList = styled(List)( overflow-x: hidden; padding: 0; display: grid; + /* hack to fix clipping issue in firefox (#3170) */ + @supports (-moz-appearance: none) { + scrollbar-width: thin; + } `, ) diff --git a/packages/eds-core-react/src/components/Autocomplete/Option.tsx b/packages/eds-core-react/src/components/Autocomplete/Option.tsx index bb6d2973df..ebb4076126 100644 --- a/packages/eds-core-react/src/components/Autocomplete/Option.tsx +++ b/packages/eds-core-react/src/components/Autocomplete/Option.tsx @@ -47,6 +47,10 @@ const Label = styled.span<{ $multiline: boolean }>(({ theme, $multiline }) => { white-space: ${$multiline ? 'normal' : 'nowrap'}; overflow: ${$multiline ? 'initial' : 'hidden'}; overflow-wrap: anywhere; + /* hack to fix clipping issue in firefox (#3170) */ + @supports (-moz-appearance: none) { + overflow: ${$multiline ? 'initial' : 'clip'}; + } ` }) 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 d4c66bd0ef..e32299f140 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 @@ -66,6 +66,18 @@ exports[`Autocomplete Matches snapshot 1`] = ` } +@supports (-moz-appearance:none) { + .c3 { + overflow: clip; + } +} + +@supports (-moz-appearance:none) { + .c1 { + scrollbar-width: thin; + } +} +