[Autocomplete] Add Mui-expanded class (#33312)

Signed-off-by: Marija Najdova <mnajdova@gmail.com>
Co-authored-by: Michał Dudak <michal.dudak@gmail.com>
Co-authored-by: Marija Najdova <mnajdova@gmail.com>
Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>

Author: 4 people

docs/pages/base/api/use-autocomplete.json

@@ -155,6 +155,11 @@
       "default": "false",
       "required": true
     },
+    "expanded": {
+      "type": { "name": "boolean", "description": "boolean" },
+      "default": "false",
+      "required": true
+    },
     "focused": {
       "type": { "name": "boolean", "description": "boolean" },
       "default": "false",

docs/pages/material-ui/api/autocomplete.json

@@ -106,6 +106,7 @@
     "classes": [
       "root",
       "fullWidth",
+      "expanded",
       "focused",
       "tag",
       "tagSizeSmall",
@@ -129,7 +130,7 @@
       "groupLabel",
       "groupUl"
     ],
-    "globalClasses": { "focused": "Mui-focused" },
+    "globalClasses": { "expanded": "Mui-expanded", "focused": "Mui-focused" },
     "name": "MuiAutocomplete"
   },
   "spread": true,

docs/translations/api-docs/autocomplete/autocomplete.json

@@ -71,6 +71,11 @@
       "nodeName": "the root element",
       "conditions": "<code>fullWidth={true}</code>"
     },
+    "expanded": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "the listbox is displayed"
+    },
     "focused": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",

docs/translations/api-docs/use-autocomplete/use-autocomplete.json

@@ -41,6 +41,7 @@
   "returnValueDescriptions": {
     "anchorEl": "An HTML element that is used to set the position of the component.",
     "dirty": "If <code>true</code>, the component input has some values.",
+    "expanded": "If <code>true</code>, the listbox is being displayed.",
     "focused": "If <code>true</code>, the component is focused.",
     "focusedTag": "Index of the focused tag for the component.",
     "getClearProps": "Resolver for the <code>clear</code> button element's props.",

packages/mui-base/src/useAutocomplete/useAutocomplete.d.ts

@@ -411,6 +411,11 @@ export interface UseAutocompleteReturnValue<
    * @default false
    */
   dirty: boolean;
+  /**
+   * If `true`, the listbox is being displayed.
+   * @default false
+   */
+  expanded: boolean;
   /**
    * If `true`, the popup is open on the component.
    * @default false

packages/mui-base/src/useAutocomplete/useAutocomplete.js

@@ -1151,6 +1151,7 @@ export default function useAutocomplete(props) {
     inputValue,
     value,
     dirty,
+    expanded: popupOpen && anchorEl,
     popupOpen,
     focused: focused || focusedTag !== -1,
     anchorEl,

packages/mui-material/src/Autocomplete/Autocomplete.d.ts

@@ -32,6 +32,7 @@ export type AutocompleteOwnerState<
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
 > = AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent> & {
   disablePortal: boolean;
+  expanded: boolean;
   focused: boolean;
   fullWidth: boolean;
   hasClearIcon: boolean;

packages/mui-material/src/Autocomplete/Autocomplete.js

@@ -28,6 +28,7 @@ const useUtilityClasses = (ownerState) => {
   const {
     classes,
     disablePortal,
+    expanded,
     focused,
     fullWidth,
     hasClearIcon,
@@ -40,6 +41,7 @@ const useUtilityClasses = (ownerState) => {
   const slots = {
     root: [
       'root',
+      expanded && 'expanded',
       focused && 'focused',
       fullWidth && 'fullWidth',
       hasClearIcon && 'hasClearIcon',
@@ -456,6 +458,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
     getOptionProps,
     value,
     dirty,
+    expanded,
     id,
     popupOpen,
     focused,
@@ -473,6 +476,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
   const ownerState = {
     ...props,
     disablePortal,
+    expanded,
     focused,
     fullWidth,
     hasClearIcon,

packages/mui-material/src/Autocomplete/Autocomplete.test.js

@@ -2895,4 +2895,39 @@ describe('<Autocomplete />', () => {
       expect(container.querySelectorAll(`.${chipClasses.root}`)).to.have.length(0);
     });
   });
+
+  describe('should apply the expanded class', () => {
+    it('when listbox having options is opened', () => {
+      const { container } = render(
+        <Autocomplete
+          options={['one', 'two', 'three']}
+          renderInput={(params) => <TextField {...params} autoFocus />}
+        />,
+      );
+
+      const root = container.querySelector(`.${classes.root}`);
+
+      expect(root).not.to.have.class(classes.expanded);
+
+      const textbox = screen.getByRole('combobox');
+      fireEvent.keyDown(textbox, { key: 'ArrowDown' }); // open listbox
+
+      expect(root).to.have.class(classes.expanded);
+    });
+
+    it('when listbox having no options is opened', () => {
+      const { container } = render(
+        <Autocomplete options={[]} renderInput={(params) => <TextField {...params} autoFocus />} />,
+      );
+
+      const root = container.querySelector(`.${classes.root}`);
+
+      expect(root).not.to.have.class(classes.expanded);
+
+      const textbox = screen.getByRole('combobox');
+      fireEvent.keyDown(textbox, { key: 'ArrowDown' }); // open listbox
+
+      expect(root).to.have.class(classes.expanded);
+    });
+  });
 });

packages/mui-material/src/Autocomplete/autocompleteClasses.ts

@@ -6,6 +6,8 @@ export interface AutocompleteClasses {
   root: string;
   /** Styles applied to the root element if `fullWidth={true}`. */
   fullWidth: string;
+  /** State class applied to the root element if the listbox is displayed. */
+  expanded: string;
   /** State class applied to the root element if focused. */
   focused: string;
   /** Styles applied to the tag elements, e.g. the chips. */
@@ -60,6 +62,7 @@ export function getAutocompleteUtilityClass(slot: string): string {
 
 const autocompleteClasses: AutocompleteClasses = generateUtilityClasses('MuiAutocomplete', [
   'root',
+  'expanded',
   'fullWidth',
   'focused',
   'focusVisible',