Merge pull request #1935 from okta/ee/autocomplete-padding

fix(odyssey-react-mui): make Autocomplete option styles match Select
okta · Aug 15, 2023 · 08fda1c · 08fda1c
2 parents cacd661 + 4d6fad5
commit 08fda1c
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 4 deletions.
diff --git a/packages/odyssey-react-mui/src/Autocomplete.tsx b/packages/odyssey-react-mui/src/Autocomplete.tsx
@@ -157,6 +157,7 @@ const Autocomplete = <
     <MuiAutocomplete
       // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div
       aria-disabled={isDisabled}
+      disableCloseOnSelect={hasMultipleChoices}
       disabled={isDisabled}
       freeSolo={isCustomValueAllowed}
       loading={isLoading}

diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -13,6 +13,7 @@
 import { ThemeOptions } from "@mui/material";
 import type {} from "@mui/lab/themeAugmentation";
 import { alertTitleClasses } from "@mui/material/AlertTitle";
+import { autocompleteClasses } from "@mui/material/Autocomplete";
 import { buttonClasses } from "@mui/material/Button";
 import { checkboxClasses } from "@mui/material/Checkbox";
 import { chipClasses } from "@mui/material/Chip";
@@ -269,15 +270,39 @@ export const components = (
           paddingBlock: odysseyTokens.Spacing2,
           paddingInline: odysseyTokens.Spacing2,
           borderRadius: odysseyTokens.BorderRadiusMain,
+
+          [`& .${autocompleteClasses.option}`]: {
+            minHeight: "unset",
+            paddingBlock: odysseyTokens.Spacing3,
+            paddingInline: odysseyTokens.Spacing4,
+            borderRadius: odysseyTokens.BorderRadiusTight,
+
+            [`&:hover`]: {
+              backgroundColor: odysseyTokens.HueNeutral100,
+            },
+
+            [`&.${autocompleteClasses.focused}`]: {
+              backgroundColor: odysseyTokens.HueNeutral100,
+            },
+
+            [`&[aria-selected="true"]`]: {
+              backgroundColor: "transparent",
+              color: odysseyTokens.TypographyColorAction,
+
+              [`&:hover`]: {
+                backgroundColor: odysseyTokens.PalettePrimaryLighter,
+              },
+
+              [`&.${autocompleteClasses.focused}`]: {
+                backgroundColor: odysseyTokens.PalettePrimaryLighter,
+              },
+            },
+          },
         },
         loading: {
           paddingBlock: odysseyTokens.Spacing3,
           paddingInline: odysseyTokens.Spacing4,
         },
-        option: {
-          paddingBlock: odysseyTokens.Spacing3,
-          borderRadius: odysseyTokens.BorderRadiusTight,
-        },
         popupIndicator: {
           padding: odysseyTokens.Spacing1,
           marginRight: "unset",
@@ -1598,6 +1623,7 @@ export const components = (
           gap: odysseyTokens.Spacing2,
           minHeight: "unset",
           paddingBlock: odysseyTokens.Spacing3,
+          paddingInline: odysseyTokens.Spacing4,
           borderRadius: odysseyTokens.BorderRadiusTight,
 
           [`& .${formControlLabelClasses.root}`]: {
@@ -1614,6 +1640,10 @@ export const components = (
             },
           },
 
+          [`:focus-visible`]: {
+            backgroundColor: odysseyTokens.HueNeutral100,
+          },
+
           [`&.${menuItemClasses.root}-destructive`]: {
             color: odysseyTokens.TypographyColorDanger,
           },