[material-ui][Autocomplete] Fix listbox opens and closes on click whe…

…n used with `limitTags` (#42494) Signed-off-by: JiYeon <[email protected]> Co-authored-by: ZeeshanTamboli <[email protected]>
mui · Sep 20, 2024 · 1289e89 · 1289e89
1 parent 62a162f
commit 1289e89
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 6 deletions.
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -737,11 +737,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
             ref: setAnchorEl,
             className: classes.inputRoot,
             startAdornment,
-            onClick: (event) => {
-              if (event.target === event.currentTarget) {
-                handleInputMouseDown(event);
-              }
-            },
+            onMouseDown: (event) => handleInputMouseDown(event),
             ...((hasClearIcon || hasPopupIcon) && {
               endAdornment: (
                 <AutocompleteEndAdornment className={classes.endAdornment} ownerState={ownerState}>

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -414,6 +414,39 @@ describe('<Autocomplete />', () => {
         expect(getAllByRole('button', { hidden: false })).to.have.lengthOf(5);
       }
     });
+
+    // Test for https://github.com/mui/material-ui/issues/42432
+    it('when the input box needs to expand downward, the listbox should remain open.', () => {
+      const options = [
+        'The Lord of the Rings: The Return of the King',
+        'The Good, the Bad and the Ugly',
+        'The Shawshank Redemption',
+        'Star Wars: Episode V - The Empire Strikes Back',
+      ];
+      const defaultValue = [
+        'The Lord of the Rings: The Return of the King',
+        'The Good, the Bad and the Ugly',
+        'The Shawshank Redemption',
+      ];
+
+      render(
+        <Autocomplete
+          multiple
+          limitTags={2}
+          options={options}
+          defaultValue={defaultValue}
+          renderInput={(params) => <TextField {...params} />}
+          sx={{ width: 500 }}
+        />,
+      );
+
+      const textbox = screen.getByRole('combobox');
+
+      fireEvent.mouseDown(textbox);
+
+      const listbox = screen.getByRole('listbox');
+      expect(listbox).toBeVisible();
+    });
   });
 
   describe('prop: filterSelectedOptions', () => {
@@ -1110,7 +1143,7 @@ describe('<Autocomplete />', () => {
         />,
       );
 
-      fireEvent.click(ref.current);
+      fireEvent.mouseDown(ref.current);
       expect(handleOpen.callCount).to.equal(1);
     });
 

diff --git a/packages/mui-material/src/useAutocomplete/useAutocomplete.js b/packages/mui-material/src/useAutocomplete/useAutocomplete.js
@@ -1020,6 +1020,7 @@ function useAutocomplete(props) {
   const handleInputMouseDown = (event) => {
     if (!disabledProp && (inputValue === '' || !open)) {
       handlePopupIndicator(event);
+      event.stopPropagation();
     }
   };
 
@@ -1108,6 +1109,7 @@ function useAutocomplete(props) {
       tabIndex: -1,
       type: 'button',
       onClick: handlePopupIndicator,
+      onMouseDown: (event) => event.stopPropagation(),
     }),
     getTagProps: ({ index }) => ({
       key: index,