Fix Select menu cropping in create item drawer (#4204)

* Fix Select menu cropping in create item drawer * Add changeset
keystonejs · Nov 11, 2020 · 5216e9d · 5216e9d
1 parent ba9906a
commit 5216e9d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/.changeset/gold-poets-fetch.md b/.changeset/gold-poets-fetch.md
@@ -0,0 +1,6 @@
+---
+"@keystonejs/fields": patch
+"@keystone-ui/fields": patch
+---
+
+Fix Select menu cropping in create item drawer
diff --git a/design-system/packages/fields/src/Select.tsx b/design-system/packages/fields/src/Select.tsx
@@ -84,6 +84,7 @@ const useStyles = ({
       boxShadow: '0 4px 11px hsla(0, 0%, 0%, 0.1)',
       borderRadius: tokens.borderRadius,
     }),
+    menuPortal: (provided: any) => ({ ...provided, zIndex: 9999 }),
     multiValue: (provided: any) => ({
       ...provided,
       backgroundColor: palette.neutral300,
@@ -121,6 +122,8 @@ export function Select({
   const tokens = useInputTokens({ width: widthKey });
   const styles = useStyles({ tokens });
 
+  const portalTarget = typeof document !== 'undefined' ? document.body : undefined;
+
   return (
     <ReactSelect
       value={value}
@@ -135,6 +138,7 @@ export function Select({
       }}
       {...props}
       isMulti={false}
+      menuPortalTarget={portalTarget}
     />
   );
 }