diff --git a/packages/@react-aria/overlays/src/usePopover.ts b/packages/@react-aria/overlays/src/usePopover.ts index 424f555b583..7ee4dbf45c6 100644 --- a/packages/@react-aria/overlays/src/usePopover.ts +++ b/packages/@react-aria/overlays/src/usePopover.ts @@ -98,7 +98,7 @@ export function usePopover(props: AriaPopoverProps, state: OverlayTriggerState): targetRef: triggerRef, overlayRef: popoverRef, isOpen: state.isOpen, - onClose: null + onClose: isNonModal ? state.close : null }); usePreventScroll({ diff --git a/packages/@react-spectrum/combobox/test/ComboBox.test.js b/packages/@react-spectrum/combobox/test/ComboBox.test.js index 139f61d7f40..20024056908 100644 --- a/packages/@react-spectrum/combobox/test/ComboBox.test.js +++ b/packages/@react-spectrum/combobox/test/ComboBox.test.js @@ -1041,6 +1041,25 @@ describe('ComboBox', function () { expect(onSelectionChange).not.toHaveBeenCalled(); }); + it('should close menu on scroll', function () { + let {getByRole} = renderComboBox(); + + let button = getByRole('button'); + triggerPress(button); + act(() => { + jest.runAllTimers(); + }); + + let listbox = getByRole('listbox'); + expect(listbox).toBeInTheDocument(); + fireEvent.scroll(document.body); + act(() => { + jest.runAllTimers(); + }); + + expect(listbox).not.toBeInTheDocument(); + }); + describe.each` Name | Component ${'uncontrolled items (defaultItems)'} | ${ControlledKeyComboBox} diff --git a/packages/react-aria-components/test/ComboBox.test.js b/packages/react-aria-components/test/ComboBox.test.js index 87c73a4d335..38d61b3bda2 100644 --- a/packages/react-aria-components/test/ComboBox.test.js +++ b/packages/react-aria-components/test/ComboBox.test.js @@ -12,7 +12,7 @@ import {act} from '@testing-library/react'; import {Button, ComboBox, ComboBoxContext, FieldError, Header, Input, Label, ListBox, ListBoxItem, Popover, Section, Text} from '../'; -import {pointerMap, render, within} from '@react-spectrum/test-utils'; +import {fireEvent, pointerMap, render, within} from '@react-spectrum/test-utils'; import React from 'react'; import userEvent from '@testing-library/user-event'; @@ -259,4 +259,15 @@ describe('ComboBox', () => { expect(input).not.toHaveAttribute('aria-describedby'); expect(combobox).not.toHaveAttribute('data-invalid'); }); + + it('should close on scroll', async () => { + let {getByRole} = render(); + + let button = getByRole('button'); + await userEvent.click(button); + let listbox = getByRole('listbox'); + expect(listbox).toBeInTheDocument(); + fireEvent.scroll(document.body); + expect(listbox).not.toBeInTheDocument(); + }); });