Skip to content

Commit

Permalink
Fix the MenuList styles
Browse files Browse the repository at this point in the history
  • Loading branch information
csandman committed Jul 24, 2023
1 parent ed24ffe commit e1ff957
Showing 1 changed file with 7 additions and 1 deletion.
8 changes: 7 additions & 1 deletion src/chakra-components/menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -90,20 +90,26 @@ 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,
variant,
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",
};
Expand Down

0 comments on commit e1ff957

Please sign in to comment.