From a8ead4d9f692b117b8993fe2ddcb4ac18bf20849 Mon Sep 17 00:00:00 2001
From: rakeshmusturi <musturi.rakesh@gmail.com>
Date: Tue, 27 Feb 2024 22:39:16 +0530
Subject: [PATCH 1/9] Update Autocomplete.js

Adding condition to add popper to DOM only when the loading is happening or options are greater than 0
---
 packages/mui-material/src/Autocomplete/Autocomplete.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
index 18e0e9d58180c1..be0213f198c7dc 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -646,7 +646,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
           },
         })}
       </AutocompleteRoot>
-      {anchorEl ? (
+      {anchorEl && !loading && groupedOptions.length > 0 ? (
         <AutocompletePopper
           as={PopperComponent}
           disablePortal={disablePortal}

From e1a33f3169dc3cce3b48989be099f5ef9e0ccc5f Mon Sep 17 00:00:00 2001
From: rakeshmusturi <musturi.rakesh@gmail.com>
Date: Wed, 28 Feb 2024 10:25:03 +0530
Subject: [PATCH 2/9] Update Autocomplete.js

Bringing out the Popper container to a function and adding the popper to every condition, so that we can add a condition not to show popper when options are empty and loading is false
---
 .../src/Autocomplete/Autocomplete.js          | 165 +++++++++++-------
 1 file changed, 101 insertions(+), 64 deletions(-)

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
index be0213f198c7dc..feeedfe40f102a 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -582,6 +582,106 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
   const popperSlotProps = slotProps.popper ?? componentsProps.popper;
   const popupIndicatorSlotProps = slotProps.popupIndicator ?? componentsProps.popupIndicator;
 
+  const renderPopper = () => {
+    let container = null;
+    if(!loading && groupedOptions.length > 0) {
+      container = <AutocompletePopper
+          as={PopperComponent}
+          disablePortal={disablePortal}
+          style={{
+            width: anchorEl ? anchorEl.clientWidth : null,
+          }}
+          ownerState={ownerState}
+          role="presentation"
+          anchorEl={anchorEl}
+          open={popupOpen}
+          {...popperSlotProps}
+          className={clsx(classes.popper, popperSlotProps?.className)}
+        >
+          <AutocompletePaper
+            ownerState={ownerState}
+            as={PaperComponent}
+            {...paperSlotProps}
+            className={clsx(classes.paper, paperSlotProps?.className)}
+          >
+            <AutocompleteListbox
+              as={ListboxComponent}
+              className={classes.listbox}
+              ownerState={ownerState}
+              {...otherListboxProps}
+              {...ListboxProps}
+              ref={combinedListboxRef}
+            >
+              {groupedOptions.map((option, index) => {
+                if (groupBy) {
+                  return renderGroup({
+                    key: option.key,
+                    group: option.group,
+                    children: option.options.map((option2, index2) =>
+                      renderListOption(option2, option.index + index2),
+                    ),
+                  });
+                }
+                return renderListOption(option, index);
+              })}
+            </AutocompleteListbox>
+          </AutocompletePaper>
+        </AutocompletePopper>
+    } else if(loading && groupedOptions.length === 0) {
+      container = <AutocompletePopper
+          as={PopperComponent}
+          disablePortal={disablePortal}
+          style={{
+            width: anchorEl ? anchorEl.clientWidth : null,
+          }}
+          ownerState={ownerState}
+          role="presentation"
+          anchorEl={anchorEl}
+          open={popupOpen}
+          {...popperSlotProps}
+          className={clsx(classes.popper, popperSlotProps?.className)}
+        >
+          <AutocompletePaper
+            ownerState={ownerState}
+            as={PaperComponent}
+            {...paperSlotProps}
+            className={clsx(classes.paper, paperSlotProps?.className)}
+          >
+            <AutocompleteLoading className={classes.loading} ownerState={ownerState}>
+              {loadingText}
+            </AutocompleteLoading>
+          </AutocompletePaper>
+        </AutocompletePopper>
+    } else if(groupedOptions.length === 0 && !freeSolo && !loading) {
+      container = <AutocompletePopper
+          as={PopperComponent}
+          disablePortal={disablePortal}
+          style={{
+            width: anchorEl ? anchorEl.clientWidth : null,
+          }}
+          ownerState={ownerState}
+          role="presentation"
+          anchorEl={anchorEl}
+          open={popupOpen}
+          {...popperSlotProps}
+          className={clsx(classes.popper, popperSlotProps?.className)}
+        >
+          <AutocompleteNoOptions
+            className={classes.noOptions}
+            ownerState={ownerState}
+            role="presentation"
+            onMouseDown={(event) => {
+              // Prevent input blur when interacting with the "no options" content
+              event.preventDefault();
+            }}
+          >
+            {noOptionsText}
+          </AutocompleteNoOptions>
+        </AutocompletePopper>
+    }
+    return container;
+  }
+
   return (
     <React.Fragment>
       <AutocompleteRoot
@@ -646,70 +746,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
           },
         })}
       </AutocompleteRoot>
-      {anchorEl && !loading && groupedOptions.length > 0 ? (
-        <AutocompletePopper
-          as={PopperComponent}
-          disablePortal={disablePortal}
-          style={{
-            width: anchorEl ? anchorEl.clientWidth : null,
-          }}
-          ownerState={ownerState}
-          role="presentation"
-          anchorEl={anchorEl}
-          open={popupOpen}
-          {...popperSlotProps}
-          className={clsx(classes.popper, popperSlotProps?.className)}
-        >
-          <AutocompletePaper
-            ownerState={ownerState}
-            as={PaperComponent}
-            {...paperSlotProps}
-            className={clsx(classes.paper, paperSlotProps?.className)}
-          >
-            {loading && groupedOptions.length === 0 ? (
-              <AutocompleteLoading className={classes.loading} ownerState={ownerState}>
-                {loadingText}
-              </AutocompleteLoading>
-            ) : null}
-            {groupedOptions.length === 0 && !freeSolo && !loading ? (
-              <AutocompleteNoOptions
-                className={classes.noOptions}
-                ownerState={ownerState}
-                role="presentation"
-                onMouseDown={(event) => {
-                  // Prevent input blur when interacting with the "no options" content
-                  event.preventDefault();
-                }}
-              >
-                {noOptionsText}
-              </AutocompleteNoOptions>
-            ) : null}
-            {groupedOptions.length > 0 ? (
-              <AutocompleteListbox
-                as={ListboxComponent}
-                className={classes.listbox}
-                ownerState={ownerState}
-                {...otherListboxProps}
-                {...ListboxProps}
-                ref={combinedListboxRef}
-              >
-                {groupedOptions.map((option, index) => {
-                  if (groupBy) {
-                    return renderGroup({
-                      key: option.key,
-                      group: option.group,
-                      children: option.options.map((option2, index2) =>
-                        renderListOption(option2, option.index + index2),
-                      ),
-                    });
-                  }
-                  return renderListOption(option, index);
-                })}
-              </AutocompleteListbox>
-            ) : null}
-          </AutocompletePaper>
-        </AutocompletePopper>
-      ) : null}
+      {anchorEl ? renderPopper() : null}
     </React.Fragment>
   );
 });

From a5a81048a5572a6ab14fe42a0ed09c7b7dc294f9 Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Wed, 6 Mar 2024 19:29:44 +0530
Subject: [PATCH 3/9] add test

---
 .../src/Autocomplete/Autocomplete.test.js          | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
index 8ef9849c3a3ccb..8a5bd4d4ebc45f 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -587,6 +587,7 @@ describe('<Autocomplete />', () => {
       expect(handleClose.callCount).to.equal(0);
       expect(textbox).to.have.attribute('aria-expanded', 'true');
     });
+
     it('should close listbox on pressing left or right keys when inputValue is empty', () => {
       const handleClose = spy();
       const options = ['one', 'two', 'three'];
@@ -2335,6 +2336,19 @@ describe('<Autocomplete />', () => {
 
       expect(container.querySelector(`.${classes.endAdornment}`)).to.equal(null);
     });
+
+    it('should not render listbox when there are no options', () => {
+      render(
+        <Autocomplete
+          open
+          freeSolo
+          options={[]}
+          renderInput={(params) => <TextField {...params} autoFocus />}
+        />,
+      );
+      const listbox = screen.queryByRole('listbox');
+      expect(listbox).to.equal(null);
+    });
   });
 
   describe('prop: onChange', () => {

From 102d930ec64cc310afb47d7e73b9019ac1bc849f Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Wed, 6 Mar 2024 19:31:21 +0530
Subject: [PATCH 4/9] add logic

---
 .../src/Autocomplete/Autocomplete.js          | 166 +++++++-----------
 1 file changed, 67 insertions(+), 99 deletions(-)

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
index feeedfe40f102a..e6ee8dafd3c824 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -582,104 +582,72 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
   const popperSlotProps = slotProps.popper ?? componentsProps.popper;
   const popupIndicatorSlotProps = slotProps.popupIndicator ?? componentsProps.popupIndicator;
 
-  const renderPopper = () => {
-    let container = null;
-    if(!loading && groupedOptions.length > 0) {
-      container = <AutocompletePopper
-          as={PopperComponent}
-          disablePortal={disablePortal}
-          style={{
-            width: anchorEl ? anchorEl.clientWidth : null,
-          }}
-          ownerState={ownerState}
-          role="presentation"
-          anchorEl={anchorEl}
-          open={popupOpen}
-          {...popperSlotProps}
-          className={clsx(classes.popper, popperSlotProps?.className)}
-        >
-          <AutocompletePaper
-            ownerState={ownerState}
-            as={PaperComponent}
-            {...paperSlotProps}
-            className={clsx(classes.paper, paperSlotProps?.className)}
-          >
-            <AutocompleteListbox
-              as={ListboxComponent}
-              className={classes.listbox}
-              ownerState={ownerState}
-              {...otherListboxProps}
-              {...ListboxProps}
-              ref={combinedListboxRef}
-            >
-              {groupedOptions.map((option, index) => {
-                if (groupBy) {
-                  return renderGroup({
-                    key: option.key,
-                    group: option.group,
-                    children: option.options.map((option2, index2) =>
-                      renderListOption(option2, option.index + index2),
-                    ),
-                  });
-                }
-                return renderListOption(option, index);
-              })}
-            </AutocompleteListbox>
-          </AutocompletePaper>
-        </AutocompletePopper>
-    } else if(loading && groupedOptions.length === 0) {
-      container = <AutocompletePopper
-          as={PopperComponent}
-          disablePortal={disablePortal}
-          style={{
-            width: anchorEl ? anchorEl.clientWidth : null,
-          }}
-          ownerState={ownerState}
-          role="presentation"
-          anchorEl={anchorEl}
-          open={popupOpen}
-          {...popperSlotProps}
-          className={clsx(classes.popper, popperSlotProps?.className)}
-        >
-          <AutocompletePaper
-            ownerState={ownerState}
-            as={PaperComponent}
-            {...paperSlotProps}
-            className={clsx(classes.paper, paperSlotProps?.className)}
-          >
-            <AutocompleteLoading className={classes.loading} ownerState={ownerState}>
-              {loadingText}
-            </AutocompleteLoading>
-          </AutocompletePaper>
-        </AutocompletePopper>
-    } else if(groupedOptions.length === 0 && !freeSolo && !loading) {
-      container = <AutocompletePopper
-          as={PopperComponent}
-          disablePortal={disablePortal}
-          style={{
-            width: anchorEl ? anchorEl.clientWidth : null,
-          }}
-          ownerState={ownerState}
-          role="presentation"
-          anchorEl={anchorEl}
-          open={popupOpen}
-          {...popperSlotProps}
-          className={clsx(classes.popper, popperSlotProps?.className)}
-        >
-          <AutocompleteNoOptions
-            className={classes.noOptions}
-            ownerState={ownerState}
-            role="presentation"
-            onMouseDown={(event) => {
-              // Prevent input blur when interacting with the "no options" content
-              event.preventDefault();
-            }}
-          >
-            {noOptionsText}
-          </AutocompleteNoOptions>
-        </AutocompletePopper>
-    }
-    return container;
+  const renderAutocompleteContent = (children) => (
+    <AutocompletePopper
+      as={PopperComponent}
+      disablePortal={disablePortal}
+      style={{ width: anchorEl ? anchorEl.clientWidth : null }}
+      ownerState={ownerState}
+      role="presentation"
+      anchorEl={anchorEl}
+      open={popupOpen}
+      {...popperSlotProps}
+      className={clsx(classes.popper, popperSlotProps?.className)}
+    >
+      <AutocompletePaper
+        as={PaperComponent}
+        {...paperSlotProps}
+        className={clsx(classes.paper, paperSlotProps?.className)}
+      >
+        {children}
+      </AutocompletePaper>
+    </AutocompletePopper>
+  );
+
+  let container = null;
+  if (!loading && groupedOptions.length > 0) {
+    container = renderAutocompleteContent(
+      <AutocompleteListbox
+        as={ListboxComponent}
+        className={classes.listbox}
+        ownerState={ownerState}
+        {...otherListboxProps}
+        {...ListboxProps}
+        ref={combinedListboxRef}
+      >
+        {groupedOptions.map((option, index) => {
+          if (groupBy) {
+            return renderGroup({
+              key: option.key,
+              group: option.group,
+              children: option.options.map((option2, index2) =>
+                renderListOption(option2, option.index + index2),
+              ),
+            });
+          }
+          return renderListOption(option, index);
+        })}
+      </AutocompleteListbox>,
+    );
+  } else if (loading && groupedOptions.length === 0) {
+    container = renderAutocompleteContent(
+      <AutocompleteLoading className={classes.loading} ownerState={ownerState}>
+        {loadingText}
+      </AutocompleteLoading>,
+    );
+  } else if (groupedOptions.length === 0 && !freeSolo && !loading) {
+    container = renderAutocompleteContent(
+      <AutocompleteNoOptions
+        className={classes.noOptions}
+        ownerState={ownerState}
+        role="presentation"
+        onMouseDown={(event) => {
+          event.preventDefault();
+        }}
+      >
+        {noOptionsText}
+      </AutocompleteNoOptions>,
+    );
   }
 
   return (
@@ -746,7 +714,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
           },
         })}
       </AutocompleteRoot>
-      {anchorEl ? renderPopper() : null}
+      {anchorEl ? container : null}
     </React.Fragment>
   );
 });

From 157bdcf5eac2a98de847192ce08a224fe89d8bc7 Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Wed, 6 Mar 2024 19:48:54 +0530
Subject: [PATCH 5/9] update test

---
 docs/package.json                             | 144 ------------------
 .../src/Autocomplete/Autocomplete.test.js     |  11 +-
 2 files changed, 7 insertions(+), 148 deletions(-)
 delete mode 100644 docs/package.json

diff --git a/docs/package.json b/docs/package.json
deleted file mode 100644
index e74f4b0ea4ba69..00000000000000
--- a/docs/package.json
+++ /dev/null
@@ -1,144 +0,0 @@
-{
-  "name": "docs",
-  "version": "5.0.0",
-  "private": true,
-  "author": "MUI Team",
-  "license": "MIT",
-  "scripts": {
-    "build": "rimraf docs/export && cross-env NODE_ENV=production NODE_OPTIONS=--max_old_space_size=8192 next build --profile && pnpm build-sw",
-    "build:clean": "rimraf .next && pnpm build",
-    "build-sw": "node ./scripts/buildServiceWorker.js",
-    "dev": "next dev",
-    "deploy": "git push -f material-ui-docs master:latest",
-    "icons": "rimraf --glob public/static/icons/* && node ./scripts/buildIcons.js",
-    "start": "next start",
-    "create-playground": "cpy --cwd=scripts playground.template.tsx ../../pages/playground --rename=index.tsx",
-    "typescript": "tsc -p tsconfig.json && tsc -p scripts/tsconfig.json",
-    "typescript:transpile": "echo 'Use `pnpm docs:typescript:formatted'` instead && exit 1",
-    "typescript:transpile:dev": "echo 'Use `pnpm docs:typescript'` instead && exit 1",
-    "link-check": "node ./scripts/reportBrokenLinks.js"
-  },
-  "dependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/plugin-transform-object-assign": "^7.23.3",
-    "@babel/runtime": "^7.23.9",
-    "@babel/runtime-corejs2": "^7.23.9",
-    "@docsearch/react": "^3.5.2",
-    "@emotion/cache": "^11.11.0",
-    "@emotion/react": "^11.11.3",
-    "@emotion/server": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mui/base": "workspace:*",
-    "@mui/docs": "workspace:^",
-    "@mui/icons-material": "workspace:^",
-    "@mui/joy": "workspace:*",
-    "@mui/lab": "workspace:*",
-    "@mui/internal-markdown": "workspace:^",
-    "@mui/material": "workspace:^",
-    "@mui/material-next": "workspace:*",
-    "@mui/styled-engine": "workspace:^",
-    "@mui/styled-engine-sc": "workspace:^",
-    "@mui/styles": "workspace:^",
-    "@mui/system": "workspace:^",
-    "@mui/types": "workspace:^",
-    "@mui/utils": "workspace:^",
-    "@mui/x-charts": "6.19.4",
-    "@mui/x-data-grid": "6.19.4",
-    "@mui/x-data-grid-generator": "6.19.4",
-    "@mui/x-data-grid-premium": "6.19.4",
-    "@mui/x-data-grid-pro": "6.19.4",
-    "@mui/x-date-pickers": "6.19.4",
-    "@mui/x-date-pickers-pro": "6.19.4",
-    "@mui/x-license-pro": "6.10.2",
-    "@mui/x-tree-view": "6.17.0",
-    "@popperjs/core": "^2.11.8",
-    "@react-spring/web": "^9.7.3",
-    "autoprefixer": "^10.4.17",
-    "autosuggest-highlight": "^3.3.4",
-    "babel-plugin-module-resolver": "^5.0.0",
-    "babel-plugin-optimize-clsx": "^2.6.2",
-    "babel-plugin-react-remove-properties": "^0.3.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "clean-css": "^5.3.3",
-    "clipboard-copy": "^4.0.1",
-    "clsx": "^2.1.0",
-    "core-js": "^2.6.11",
-    "cross-env": "^7.0.3",
-    "css-mediaquery": "^0.1.2",
-    "date-fns": "^2.30.0",
-    "date-fns-jalali": "^2.21.3-1",
-    "feed": "^4.2.2",
-    "fg-loadcss": "^3.1.0",
-    "final-form": "^4.20.10",
-    "flexsearch": "^0.7.43",
-    "fs-extra": "^11.2.0",
-    "json2mq": "^0.2.0",
-    "jss": "^10.10.0",
-    "jss-plugin-template": "^10.10.0",
-    "jss-rtl": "^0.3.0",
-    "lodash": "^4.17.21",
-    "lz-string": "^1.5.0",
-    "markdown-to-jsx": "^7.4.1",
-    "material-ui-popup-state": "^5.0.10",
-    "next": "^13.5.1",
-    "notistack": "3.0.1",
-    "nprogress": "^0.2.0",
-    "postcss": "^8.4.35",
-    "postcss-import": "^15.1.0",
-    "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-draggable": "^4.4.6",
-    "react-final-form": "^6.5.9",
-    "react-imask": "^7.3.0",
-    "react-intersection-observer": "^9.5.3",
-    "react-is": "^18.2.0",
-    "react-number-format": "^5.3.1",
-    "react-router-dom": "^6.21.3",
-    "react-runner": "^1.0.3",
-    "react-simple-code-editor": "^0.13.1",
-    "react-spring": "^9.7.3",
-    "react-swipeable-views": "^0.14.0",
-    "react-swipeable-views-utils": "^0.14.0",
-    "react-transition-group": "^4.4.5",
-    "react-virtuoso": "^4.6.3",
-    "react-window": "^1.8.10",
-    "rimraf": "^5.0.5",
-    "styled-components": "^6.1.8",
-    "stylis": "4.2.0",
-    "stylis-plugin-rtl": "^2.1.1",
-    "use-count-up": "^3.0.1",
-    "webpack-bundle-analyzer": "^4.10.1"
-  },
-  "devDependencies": {
-    "@babel/plugin-transform-react-constant-elements": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
-    "@mui/internal-scripts": "workspace:^",
-    "@mui-internal/docs-utils": "workspace:^",
-    "@mui-internal/test-utils": "workspace:^",
-    "@types/autosuggest-highlight": "^3.2.3",
-    "@types/chai": "^4.3.11",
-    "@types/css-mediaquery": "^0.1.4",
-    "@types/json2mq": "^0.2.2",
-    "@types/node": "^18.19.15",
-    "@types/prop-types": "^15.7.11",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
-    "@types/react-swipeable-views": "^0.13.5",
-    "@types/react-swipeable-views-utils": "^0.13.7",
-    "@types/react-transition-group": "^4.4.10",
-    "@types/react-window": "^1.8.8",
-    "@types/stylis": "^4.2.0",
-    "chai": "^4.4.1",
-    "cross-fetch": "^4.0.0",
-    "gm": "^1.25.0",
-    "marked": "^5.1.2",
-    "playwright": "^1.41.2",
-    "prettier": "^3.2.5",
-    "tailwindcss": "^3.4.1",
-    "yargs": "^17.7.2"
-  }
-}
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
index 8a5bd4d4ebc45f..c20e977925918e 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -2337,17 +2337,20 @@ describe('<Autocomplete />', () => {
       expect(container.querySelector(`.${classes.endAdornment}`)).to.equal(null);
     });
 
-    it('should not render listbox when there are no options', () => {
+    it('should not render popper when there are no options', () => {
       render(
         <Autocomplete
           open
           freeSolo
           options={[]}
-          renderInput={(params) => <TextField {...params} autoFocus />}
+          renderInput={(params) => <TextField {...params} />}
+          slotProps={{
+            popper: { 'data-testid': 'popperRoot' },
+          }}
         />,
       );
-      const listbox = screen.queryByRole('listbox');
-      expect(listbox).to.equal(null);
+      const popper = screen.queryByTestId('popperRoot');
+      expect(popper).to.equal(null);
     });
   });
 

From e2af6fbb2debd0e3bce4d722a877eb4f1dd45f27 Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Wed, 6 Mar 2024 20:00:19 +0530
Subject: [PATCH 6/9] add missing ownerState

---
 packages/mui-material/src/Autocomplete/Autocomplete.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
index e6ee8dafd3c824..a9a70b03ac2120 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -595,6 +595,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
       className={clsx(classes.popper, popperSlotProps?.className)}
     >
       <AutocompletePaper
+        ownerState={ownerState}
         as={PaperComponent}
         {...paperSlotProps}
         className={clsx(classes.paper, paperSlotProps?.className)}

From a6b44caf00088b9c76b49fad88d1f25e4132ac42 Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Wed, 6 Mar 2024 20:02:34 +0530
Subject: [PATCH 7/9] add missing comment

---
 packages/mui-material/src/Autocomplete/Autocomplete.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
index a9a70b03ac2120..e94576954376f1 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -643,6 +643,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
         ownerState={ownerState}
         role="presentation"
         onMouseDown={(event) => {
+          // Prevent input blur when interacting with the "no options" content
           event.preventDefault();
         }}
       >

From 75fcb1720cb8e441a3009416367fca72af85d2cf Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Wed, 6 Mar 2024 20:08:42 +0530
Subject: [PATCH 8/9] rerun CI


From 8b1b5467512f78b5d3e11077db38d5cb369f000d Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Thu, 7 Mar 2024 15:22:33 +0530
Subject: [PATCH 9/9] rename variables

---
 .../mui-material/src/Autocomplete/Autocomplete.js    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
index e94576954376f1..3672e8f334d4d6 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -582,7 +582,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
   const popperSlotProps = slotProps.popper ?? componentsProps.popper;
   const popupIndicatorSlotProps = slotProps.popupIndicator ?? componentsProps.popupIndicator;
 
-  const renderAutocompleteContent = (children) => (
+  const renderAutocompletePopperChildren = (children) => (
     <AutocompletePopper
       as={PopperComponent}
       disablePortal={disablePortal}
@@ -605,9 +605,9 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
     </AutocompletePopper>
   );
 
-  let container = null;
+  let autocompletePopper = null;
   if (!loading && groupedOptions.length > 0) {
-    container = renderAutocompleteContent(
+    autocompletePopper = renderAutocompletePopperChildren(
       <AutocompleteListbox
         as={ListboxComponent}
         className={classes.listbox}
@@ -631,13 +631,13 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
       </AutocompleteListbox>,
     );
   } else if (loading && groupedOptions.length === 0) {
-    container = renderAutocompleteContent(
+    autocompletePopper = renderAutocompletePopperChildren(
       <AutocompleteLoading className={classes.loading} ownerState={ownerState}>
         {loadingText}
       </AutocompleteLoading>,
     );
   } else if (groupedOptions.length === 0 && !freeSolo && !loading) {
-    container = renderAutocompleteContent(
+    autocompletePopper = renderAutocompletePopperChildren(
       <AutocompleteNoOptions
         className={classes.noOptions}
         ownerState={ownerState}
@@ -716,7 +716,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
           },
         })}
       </AutocompleteRoot>
-      {anchorEl ? container : null}
+      {anchorEl ? autocompletePopper : null}
     </React.Fragment>
   );
 });