[TextField] Fix type error when using inputTypeSearch class for `ou…

…tlined` and `filled` inputs (#36740) Co-authored-by: ZeeshanTamboli <[email protected]>
mui · Apr 12, 2023 · 4109ca1 · 4109ca1
1 parent 44748d4
commit 4109ca1
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 2 deletions.
diff --git a/docs/pages/material-ui/api/filled-input.json b/docs/pages/material-ui/api/filled-input.json
@@ -75,7 +75,8 @@
       "inputHiddenLabel",
       "inputMultiline",
       "inputAdornedStart",
-      "inputAdornedEnd"
+      "inputAdornedEnd",
+      "inputTypeSearch"
     ],
     "globalClasses": { "focused": "Mui-focused", "disabled": "Mui-disabled", "error": "Mui-error" },
     "name": "MuiFilledInput"

diff --git a/docs/pages/material-ui/api/outlined-input.json b/docs/pages/material-ui/api/outlined-input.json
@@ -65,7 +65,8 @@
       "inputSizeSmall",
       "inputMultiline",
       "inputAdornedStart",
-      "inputAdornedEnd"
+      "inputAdornedEnd",
+      "inputTypeSearch"
     ],
     "globalClasses": { "focused": "Mui-focused", "disabled": "Mui-disabled", "error": "Mui-error" },
     "name": "MuiOutlinedInput"

diff --git a/docs/translations/api-docs/filled-input/filled-input.json b/docs/translations/api-docs/filled-input/filled-input.json
@@ -112,6 +112,11 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the input element",
       "conditions": "<code>endAdornment</code> is provided"
+    },
+    "inputTypeSearch": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the input element",
+      "conditions": "<code>type=\"search\"</code>"
     }
   }
 }
diff --git a/docs/translations/api-docs/outlined-input/outlined-input.json b/docs/translations/api-docs/outlined-input/outlined-input.json
@@ -99,6 +99,11 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the input element",
       "conditions": "<code>endAdornment</code> is provided"
+    },
+    "inputTypeSearch": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the input element",
+      "conditions": "<code>type=\"search\"</code>"
     }
   }
 }
diff --git a/packages/mui-material/src/FilledInput/filledInputClasses.ts b/packages/mui-material/src/FilledInput/filledInputClasses.ts
@@ -37,6 +37,8 @@ export interface FilledInputClasses {
   inputAdornedStart: string;
   /** Styles applied to the input element if `endAdornment` is provided. */
   inputAdornedEnd: string;
+  /** Styles applied to the input element if `type="search"`. */
+  inputTypeSearch: string;
 }
 
 export type FilledInputClassKey = keyof FilledInputClasses;

diff --git a/packages/mui-material/src/OutlinedInput/outlinedInputClasses.ts b/packages/mui-material/src/OutlinedInput/outlinedInputClasses.ts
@@ -33,6 +33,8 @@ export interface OutlinedInputClasses {
   inputAdornedStart: string;
   /** Styles applied to the input element if `endAdornment` is provided. */
   inputAdornedEnd: string;
+  /** Styles applied to the input element if `type="search"`. */
+  inputTypeSearch: string;
 }
 
 export type OutlinedInputClassKey = keyof OutlinedInputClasses;

diff --git a/packages/mui-material/src/TextField/TextField.spec.tsx b/packages/mui-material/src/TextField/TextField.spec.tsx
@@ -10,6 +10,13 @@ import { expectType } from '@mui/types';
   const standard = (
     <TextField variant="standard" InputProps={{ classes: { inputTypeSearch: 'search-input' } }} />
   );
+
+  const outlinedInputTypeSearch = (
+    <TextField variant="outlined" InputProps={{ classes: { inputTypeSearch: 'search-input' } }} />
+  );
+  const filledInputTypeSearch = (
+    <TextField variant="filled" InputProps={{ classes: { inputTypeSearch: 'search-input' } }} />
+  );
   const standardOutlinedClassname = (
     <TextField
       variant="standard"