🐛Autocomplete: Firefox scrollbar clipping issue (#3179)

equinor · Dec 11, 2023 · c08fefe · c08fefe
1 parent f786992
commit c08fefe
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 0 deletions.
diff --git 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
@@ -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
@@ -66,6 +66,18 @@ exports[`Autocomplete Matches snapshot 1`] = `
 
 }
 
+@supports (-moz-appearance:none) {
+  .c3 {
+    overflow: clip;
+  }
+}
+
+@supports (-moz-appearance:none) {
+  .c1 {
+    scrollbar-width: thin;
+  }
+}
+
 <ul
   aria-labelledby="downshift-:r0:-label"
   class="c0 c1"