fix: resolves intermittent layout issue with MaterialTextField

Plant-for-the-Planet-org · Nov 22, 2024 · 83e1544 · 83e1544
1 parent bc4af28
commit 83e1544
Showing 1 changed file with 71 additions and 30 deletions.
diff --git a/src/Common/InputTypes/MaterialTextField.tsx b/src/Common/InputTypes/MaterialTextField.tsx
@@ -5,61 +5,102 @@ import themeProperties from "./../../../styles/themeProperties";
 const MaterialTextField = styled(TextField)({
   width: "100%",
   color: "var(--primary-font-color)",
-  "& .MuiInputBase-input.MuiOutlinedInput-input": {
+
+  // Label styles
+  "& label": {
     color: "var(--primary-font-color)",
-    height: "1.1876em",
-    lineHeight: "1.1876em",
+    fontFamily: themeProperties.fontFamily,
+    fontSize: "14px",
+    lineHeight: "1",
   },
-  "& .MuiInputAdornment-root": {
-    color: "var(--primary-font-color)",
+
+  // Base label positioning
+  "& .MuiInputLabel-root": {
+    transform: "translate(14px, 16px) scale(1)", // Matches original position
+    transformOrigin: "left top",
+    position: "absolute",
+    left: 0,
+    top: 0,
+    display: "block",
+    padding: 0,
+    pointerEvents: "none",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    maxWidth: "calc(100% - 24px)",
   },
+
+  // Shrunk/focused label
   "& label.Mui-focused": {
     color: "var(--primary-font-color)",
     fontFamily: themeProperties.fontFamily,
   },
-  "& label": {
-    color: "var(--primary-font-color)",
-    fontFamily: themeProperties.fontFamily,
-    fontSize: "14px",
-    lineHeight: 1,
-  },
+
   "& .MuiInputLabel-outlined.MuiInputLabel-shrink": {
     transform: "translate(14px, -4px) scale(0.75)",
-    top: "-3px",
-  },
-  "& .MuiOutlinedInput-notchedOutline": {
-    border: "0px!important",
+    top: "-3px", // Critical for matching original position
+    pointerEvents: "auto",
+    maxWidth: "calc(133% - 32px)",
   },
-  "& .Mui-disabled.MuiInputLabel-root": {
+
+  // Input styles
+  "& .MuiInputBase-input.MuiOutlinedInput-input": {
     color: "var(--primary-font-color)",
+    height: "20px",
+    lineHeight: "20px",
+    padding: "14px",
   },
-  "& .Mui-disabled.MuiOutlinedInput-input ": {
-    color: "var(--disabled-font-color)",
-    WebkitTextFillColor: "initial",
-  },
+
+  // Input container
   "& .MuiOutlinedInput-root": {
     backgroundColor: "var(--background-color-dark)",
-    border: "0px!important",
     borderRadius: "10px",
     fontFamily: themeProperties.fontFamily,
+    minHeight: "44px",
+
+    "& fieldset": {
+      border: "none",
+    },
   },
-  "& .MuiOutlinedInput-input": {
-    padding: "14px",
+
+  // Input adornment
+  "& .MuiInputAdornment-root": {
+    color: "var(--primary-font-color)",
+  },
+
+  // Notched outline
+  "& .MuiOutlinedInput-notchedOutline": {
+    border: "0px!important",
   },
+
+  // Disabled state
+  "& .Mui-disabled": {
+    "&.MuiInputLabel-root": {
+      color: "var(--primary-font-color)",
+    },
+    "&.MuiOutlinedInput-input": {
+      color: "var(--disabled-font-color)",
+      WebkitTextFillColor: "initial",
+    },
+  },
+
+  // Multiline
   "& .MuiInputBase-multiline": {
     padding: "0px",
   },
+
+  // Autocomplete
   '& .MuiAutocomplete-inputRoot[class*="MuiOutlinedInput-root"]': {
     padding: "14px",
-  },
-  '& .MuiAutocomplete-inputRoot[class*="MuiOutlinedInput-root"] .MuiAutocomplete-input':
-    {
+
+    "& .MuiAutocomplete-input": {
       padding: "0px",
+
+      "&:first-of-type": {
+        paddingLeft: "0px",
+      },
     },
-  '& .MuiAutocomplete-inputRoot[class*="MuiOutlinedInput-root"] .MuiAutocomplete-input:first-of-type':
-    {
-      paddingLeft: "0px",
-    },
+  },
 });
 
 export default MaterialTextField;