Merge pull request #1590 from okta/ee/read-only-input

TextField: update :read-only and :disabled styles
okta · Oct 5, 2022 · 1724a5f · 1724a5f
2 parents 0231d18 + ccea01b
commit 1724a5f
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/packages/odyssey-react-mui/src/themes/odyssey/components.tsx b/packages/odyssey-react-mui/src/themes/odyssey/components.tsx
@@ -532,9 +532,13 @@ export const components: ThemeOptions["components"] = {
   },
   MuiInputBase: {
     styleOverrides: {
-      root: {
+      root: ({ ownerState, theme }) => ({
         lineHeight: "1.14285714",
-      },
+
+        ...(ownerState.readOnly === true && {
+          backgroundColor: theme.palette.grey[50],
+        }),
+      }),
       input: {
         boxSizing: "border-box",
         height: "auto",
@@ -674,10 +678,11 @@ export const components: ThemeOptions["components"] = {
         [`&.${outlinedInputClasses.disabled} .${outlinedInputClasses.notchedOutline}`]:
           {
             borderColor: theme.palette.action.disabled,
+            pointerEvents: "auto",
           },
         [`&.${outlinedInputClasses.disabled}`]: {
           backgroundColor: theme.palette.grey[50],
-          pointerEvents: "none",
+          cursor: "not-allowed",
         },
         ...(ownerState.startAdornment && {
           paddingLeft: theme.spacing(3),