diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index f165b797e12aa1..f249219d26da5e 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -738,7 +738,11 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { ref: setAnchorEl, className: classes.inputRoot, startAdornment, - onMouseDown: (event) => handleInputMouseDown(event), + onMouseDown: (event) => { + if (event.target === event.currentTarget) { + handleInputMouseDown(event); + } + }, ...((hasClearIcon || hasPopupIcon) && { endAdornment: ( diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js index 506e0decd989c5..97099aa953faee 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js @@ -442,39 +442,6 @@ describe('', () => { 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( - } - sx={{ width: 500 }} - />, - ); - - const textbox = screen.getByRole('combobox'); - - fireEvent.mouseDown(textbox); - - const listbox = screen.getByRole('listbox'); - expect(listbox).toBeVisible(); - }); }); describe('prop: filterSelectedOptions', () => { @@ -892,6 +859,49 @@ describe('', () => { expect(handleSubmit.callCount).to.equal(4); }); + it('should not open the autocomplete popup when deleting chips', async () => { + const { queryByRole, queryByText, user } = render( + } + />, + ); + + expect(queryByRole('listbox')).to.equal(null); + + const chip = queryByText('one').parentElement; + expect(chip).not.to.equal(null); + + // Delete the chip + await user.click(chip.getElementsByClassName(chipClasses.deleteIcon)[0]); + + expect(queryByText('one')).to.equal(null); + expect(queryByRole('listbox')).to.equal(null); + }); + + it('should toggle the autocomplete popup when clicking the popup indicator', async () => { + const { queryByRole, getByRole, user } = render( + } + />, + ); + + expect(queryByRole('listbox')).to.equal(null); + + const popupIndicator = getByRole('button', { name: 'Open' }); + await user.click(popupIndicator); + + expect(queryByRole('listbox')).not.to.equal(null); + + await user.click(popupIndicator); + + expect(queryByRole('listbox')).to.equal(null); + }); + describe('prop: getOptionDisabled', () => { it('should prevent the disabled option to trigger actions but allow focus with disabledItemsFocusable', () => { const handleSubmit = spy(); diff --git a/packages/mui-material/src/useAutocomplete/useAutocomplete.js b/packages/mui-material/src/useAutocomplete/useAutocomplete.js index 28b161a763a221..35789e85e2917c 100644 --- a/packages/mui-material/src/useAutocomplete/useAutocomplete.js +++ b/packages/mui-material/src/useAutocomplete/useAutocomplete.js @@ -1020,7 +1020,6 @@ function useAutocomplete(props) { const handleInputMouseDown = (event) => { if (!disabledProp && (inputValue === '' || !open)) { handlePopupIndicator(event); - event.stopPropagation(); } }; @@ -1109,7 +1108,6 @@ function useAutocomplete(props) { tabIndex: -1, type: 'button', onClick: handlePopupIndicator, - onMouseDown: (event) => event.stopPropagation(), }), getTagProps: ({ index }) => ({ key: index, diff --git a/test/regressions/fixtures/Autocomplete/TextboxExpandsOnListboxOpen.js b/test/regressions/fixtures/Autocomplete/TextboxExpandsOnListboxOpen.js new file mode 100644 index 00000000000000..d5c43e69c0bc78 --- /dev/null +++ b/test/regressions/fixtures/Autocomplete/TextboxExpandsOnListboxOpen.js @@ -0,0 +1,18 @@ +import * as React from 'react'; +import TextField from '@mui/material/TextField'; +import Autocomplete from '@mui/material/Autocomplete'; + +export default function StandardAutocomplete() { + return ( +
+ } + sx={{ width: 300 }} + /> +
+ ); +} diff --git a/test/regressions/index.test.js b/test/regressions/index.test.js index 4eb8657c904c32..290b89661556b1 100644 --- a/test/regressions/index.test.js +++ b/test/regressions/index.test.js @@ -131,6 +131,20 @@ async function main() { await takeScreenshot({ testcase, route: '/regression-Rating/PreciseFocusVisibleRating3' }); }); }); + + describe('Autocomplete', () => { + it('should not close immediately when textbox expands', async () => { + const testcase = await renderFixture( + '/regression-Autocomplete/TextboxExpandsOnListboxOpen', + ); + await page.getByRole('combobox').click(); + await page.waitForTimeout(10); + await takeScreenshot({ + testcase, + route: '/regression-Autocomplete/TextboxExpandsOnListboxOpen2', + }); + }); + }); }); run();