[Autocomplete] Fix keepMounted Popper prop not working (mui#33957)

* add test * add logic * update test description * prettier * remove popupOpen check in width style
daniel-rabe · Nov 29, 2022 · 9a6c9b9 · 9a6c9b9
1 parent c29b8e0
commit 9a6c9b9
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -592,7 +592,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
           },
         })}
       </AutocompleteRoot>
-      {popupOpen && anchorEl ? (
+      {anchorEl ? (
         <AutocompletePopper
           as={PopperComponent}
           disablePortal={disablePortal}
@@ -602,7 +602,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
           ownerState={ownerState}
           role="presentation"
           anchorEl={anchorEl}
-          open
+          open={popupOpen}
           {...componentsProps.popper}
           className={clsx(classes.popper, componentsProps.popper?.className)}
         >

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -2525,6 +2525,22 @@ describe('<Autocomplete />', () => {
       expect(popupIndicator).to.have.class(iconButtonClasses.sizeLarge);
       expect(popupIndicator).to.have.class('my-class');
     });
+
+    it('should keep AutocompletePopper mounted if keepMounted is true in popper props', () => {
+      // Autocomplete is not opened
+      render(
+        <Autocomplete
+          options={['one', 'two']}
+          renderInput={(params) => <TextField {...params} />}
+          componentsProps={{
+            popper: { 'data-testid': 'popperRoot', keepMounted: true },
+          }}
+        />,
+      );
+
+      const popperRoot = screen.getByTestId('popperRoot');
+      expect(popperRoot.style.display).to.equal('none');
+    });
   });
 
   describe('prop: readOnly', () => {