From e1ff957cbfa4bb5d361d7aac6f8a515a688fa116 Mon Sep 17 00:00:00 2001
From: csandman <chris@getcuebox.com>
Date: Mon, 24 Jul 2023 17:30:18 -0400
Subject: [PATCH] Fix the MenuList styles

---
 src/chakra-components/menu.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/chakra-components/menu.tsx b/src/chakra-components/menu.tsx
index 42d1e8e..d0e207c 100644
--- a/src/chakra-components/menu.tsx
+++ b/src/chakra-components/menu.tsx
@@ -90,6 +90,9 @@ export const MenuList = <
 
   const menuStyles = useMultiStyleConfig("Menu");
 
+  // We're pulling in the border radius from the theme for the input component
+  // so we can match the menu lists' border radius to it, but in 2.8.0 the value
+  // was changed to being pulled from a theme variable instead of being hardcoded
   const size = useSize(sizeProp);
   const inputStyles = useMultiStyleConfig("Input", {
     size,
@@ -97,13 +100,16 @@ export const MenuList = <
     focusBorderColor,
     errorBorderColor,
   });
+  const fieldStyles = inputStyles.field as Record<string, string>;
 
   const initialSx: SystemStyleObject = {
     ...menuStyles.list,
     minW: "100%",
     maxHeight: `${maxHeight}px`,
     overflowY: "auto",
-    borderRadius: inputStyles.field?.borderRadius,
+    // This is hacky, but it works. May be removed in the future
+    "--input-border-radius": fieldStyles?.["--input-border-radius"],
+    borderRadius: fieldStyles?.borderRadius || menuStyles.list?.borderRadius,
     position: "relative", // required for offset[Height, Top] > keyboard scroll
     WebkitOverflowScrolling: "touch",
   };