[Autocomplete][Material] Add missing focusVisible class in Autocomp…

…leteClasses (#37502)
mui · Jun 5, 2023 · 984a3c4 · 984a3c4
1 parent c2e2008
commit 984a3c4
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 1 deletion.
diff --git a/docs/pages/material-ui/api/autocomplete.json b/docs/pages/material-ui/api/autocomplete.json
@@ -108,6 +108,7 @@
       "fullWidth",
       "expanded",
       "focused",
+      "focusVisible",
       "tag",
       "tagSizeSmall",
       "tagSizeMedium",
@@ -130,7 +131,11 @@
       "groupLabel",
       "groupUl"
     ],
-    "globalClasses": { "expanded": "Mui-expanded", "focused": "Mui-focused" },
+    "globalClasses": {
+      "expanded": "Mui-expanded",
+      "focused": "Mui-focused",
+      "focusVisible": "Mui-focusVisible"
+    },
     "name": "MuiAutocomplete"
   },
   "spread": true,

diff --git a/docs/translations/api-docs/autocomplete/autocomplete.json b/docs/translations/api-docs/autocomplete/autocomplete.json
@@ -81,6 +81,11 @@
       "nodeName": "the root element",
       "conditions": "focused"
     },
+    "focusVisible": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the option elements",
+      "conditions": "they are keyboard focused"
+    },
     "tag": {
       "description": "Styles applied to {{nodeName}}, {{conditions}}.",
       "nodeName": "the tag elements",

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx b/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx
@@ -90,6 +90,13 @@ function MyAutocomplete<
   renderInput={(params) => <TextField {...params} value={params.inputProps.value} />}
 />;
 
+// Test for focusVisible class
+<Autocomplete
+  classes={{ focusVisible: 'test' }}
+  options={[{ label: '1' }, { label: '2' }]}
+  renderInput={(params) => <TextField {...params} />}
+/>;
+
 interface Option {
   label: string;
   value: string;

diff --git a/packages/mui-material/src/Autocomplete/autocompleteClasses.ts b/packages/mui-material/src/Autocomplete/autocompleteClasses.ts
@@ -10,6 +10,8 @@ export interface AutocompleteClasses {
   expanded: string;
   /** State class applied to the root element if focused. */
   focused: string;
+  /** Styles applied to the option elements if they are keyboard focused. */
+  focusVisible: string;
   /** Styles applied to the tag elements, e.g. the chips. */
   tag: string;
   /** Styles applied to the tag elements, e.g. the chips if `size="small"`. */