From 3ff169061f7aef5747a022d78daab20019a9a8c7 Mon Sep 17 00:00:00 2001 From: Soufiane Boutahlil Date: Fri, 17 Nov 2023 21:15:24 +0100 Subject: [PATCH 1/9] close popover --- packages/@react-aria/overlays/src/usePopover.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@react-aria/overlays/src/usePopover.ts b/packages/@react-aria/overlays/src/usePopover.ts index cdaa48a6379..13d4a92023a 100644 --- a/packages/@react-aria/overlays/src/usePopover.ts +++ b/packages/@react-aria/overlays/src/usePopover.ts @@ -89,7 +89,7 @@ export function usePopover(props: AriaPopoverProps, state: OverlayTriggerState): targetRef: triggerRef, overlayRef: popoverRef, isOpen: state.isOpen, - onClose: null + onClose: !(isNonModal || !state.isOpen) ? state.close : null }); usePreventScroll({ From eac00988be7d7d459c52e3df48e539fb188e0b42 Mon Sep 17 00:00:00 2001 From: Soufiane Boutahlil Date: Tue, 21 Nov 2023 20:08:12 +0100 Subject: [PATCH 2/9] close popover onscroll --- packages/@react-aria/overlays/src/usePopover.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@react-aria/overlays/src/usePopover.ts b/packages/@react-aria/overlays/src/usePopover.ts index 13d4a92023a..8b8f8384068 100644 --- a/packages/@react-aria/overlays/src/usePopover.ts +++ b/packages/@react-aria/overlays/src/usePopover.ts @@ -89,7 +89,7 @@ export function usePopover(props: AriaPopoverProps, state: OverlayTriggerState): targetRef: triggerRef, overlayRef: popoverRef, isOpen: state.isOpen, - onClose: !(isNonModal || !state.isOpen) ? state.close : null + onClose: isNonModal ? state.close : null }); usePreventScroll({ From dfed92b7c35b822690c8645827a731f46a62c683 Mon Sep 17 00:00:00 2001 From: Soufiane Boutahlil Date: Fri, 24 Nov 2023 19:54:20 +0100 Subject: [PATCH 3/9] add test to RAC --- .../react-aria-components/test/ComboBox.test.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/react-aria-components/test/ComboBox.test.js b/packages/react-aria-components/test/ComboBox.test.js index 2a5a6f692d7..ae1b80ee58e 100644 --- a/packages/react-aria-components/test/ComboBox.test.js +++ b/packages/react-aria-components/test/ComboBox.test.js @@ -12,7 +12,7 @@ import {Button, ComboBox, ComboBoxContext, Input, Item, Label, ListBox, Popover, Text} from '../'; import React from 'react'; -import {render, within} from '@react-spectrum/test-utils'; +import {fireEvent, render, within} from '@react-spectrum/test-utils'; import userEvent from '@testing-library/user-event'; let TestComboBox = (props) => ( @@ -84,4 +84,15 @@ describe('ComboBox', () => { userEvent.click(button); expect(button).toHaveAttribute('data-pressed'); }); + + it('should close on scroll', async () => { + let {getByRole} = render(); + + let button = getByRole('button'); + userEvent.click(button); + let listbox = getByRole('listbox'); + expect(listbox).toBeInTheDocument(); + fireEvent.scroll(document.body); + expect(listbox).not.toBeInTheDocument(); + }); }); From 262c0c0244091e6f3449f54765de2bc8670558c6 Mon Sep 17 00:00:00 2001 From: Soufiane Boutahlil Date: Fri, 24 Nov 2023 20:15:44 +0100 Subject: [PATCH 4/9] add test to RSP --- .../@react-spectrum/combobox/test/ComboBox.test.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/@react-spectrum/combobox/test/ComboBox.test.js b/packages/@react-spectrum/combobox/test/ComboBox.test.js index 09d6d0b01a3..33cdf1b91d4 100644 --- a/packages/@react-spectrum/combobox/test/ComboBox.test.js +++ b/packages/@react-spectrum/combobox/test/ComboBox.test.js @@ -1029,6 +1029,17 @@ describe('ComboBox', function () { expect(onSelectionChange).not.toHaveBeenCalled(); }); + it('should close menu on scroll', async () => { + let {getByRole} = renderComboBox(); + + let button = getByRole('button'); + userEvent.click(button); + let listbox = getByRole('listbox'); + expect(listbox).toBeInTheDocument(); + fireEvent.scroll(document.body); + expect(listbox).not.toBeInTheDocument(); + }); + describe.each` Name | Component ${'uncontrolled items (defaultItems)'} | ${ControlledKeyComboBox} From 9a4424535ac2554ded28619dfeab4f7074ded650 Mon Sep 17 00:00:00 2001 From: Soufiane Boutahlil Date: Fri, 24 Nov 2023 20:56:23 +0100 Subject: [PATCH 5/9] add story --- .../combobox/stories/ComboBox.stories.tsx | 42 ++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx b/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx index 6081e5cd880..8c782a272d8 100644 --- a/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx +++ b/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx @@ -27,7 +27,7 @@ import Draw from '@spectrum-icons/workflow/Draw'; import {Flex} from '@react-spectrum/layout'; import {Heading} from '@react-spectrum/text'; import {Link} from '@react-spectrum/link'; -import React, {useRef, useState} from 'react'; +import React, {useRef, useState, useEffect} from 'react'; import {Text} from '@react-spectrum/text'; import {useAsyncList} from '@react-stately/data'; import {useFilter} from '@react-aria/i18n'; @@ -412,6 +412,10 @@ export const InDialog: ComboBoxStory = { storyName: 'within a dialog' }; +export const WithinScrollableElement: ComboBoxStory = { + render: (args) => +}; + export const WHCM: ComboBoxStory = { render: () => ( @@ -958,3 +962,39 @@ function ComboBoxWithinDialog(props) { ); } + +let WithinScrollableContainerComboBox = (props) => { + const [root, setRoot] = useState(null); + const element = useRef(); + + useEffect(() => { + setRoot(element.current); + }, []); + + return ( +
+
+ + Item #1 + Item #2 + Item #3 + +
+
+ ); +}; \ No newline at end of file From 4b19ef5dedfc466e1c9cfbe31b5edb9cc05eadff Mon Sep 17 00:00:00 2001 From: Soufiane Boutahlil Date: Fri, 24 Nov 2023 20:56:51 +0100 Subject: [PATCH 6/9] add popover.test.js --- .../test/Popover.test.js | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 packages/react-aria-components/test/Popover.test.js diff --git a/packages/react-aria-components/test/Popover.test.js b/packages/react-aria-components/test/Popover.test.js new file mode 100644 index 00000000000..50b9a3a23e0 --- /dev/null +++ b/packages/react-aria-components/test/Popover.test.js @@ -0,0 +1,22 @@ +/* + * Copyright 2022 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +import {act, fireEvent, render, within} from '@react-spectrum/test-utils'; +import {Button, Cell, Checkbox, Collection, Column, Row, Table, TableBody, TableHeader, useDragAndDrop, useTableOptions} from '../'; +import React from 'react'; +import userEvent from '@testing-library/user-event'; + +describe('Popover', () => { + it('should close on scroll', () => { + + }); +}); From 53d218182d9eb770beb272f9aaca7d6b01e409bc Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Mon, 27 Nov 2023 11:44:54 -0800 Subject: [PATCH 7/9] fix lint and tests --- .../combobox/stories/ComboBox.stories.tsx | 26 +++++++++---------- .../combobox/test/ComboBox.test.js | 14 +++++++--- .../test/ComboBox.test.js | 9 +++---- 3 files changed, 27 insertions(+), 22 deletions(-) diff --git a/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx b/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx index 8a5ba71aa36..4341e231716 100644 --- a/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx +++ b/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx @@ -28,7 +28,7 @@ import {Flex} from '@react-spectrum/layout'; import {Heading, Text} from '@react-spectrum/text'; import {Key} from '@react-types/shared'; import {Link} from '@react-spectrum/link'; -import React, {useRef, useState, useEffect} from 'react'; +import React, {useEffect, useRef, useState} from 'react'; import {useAsyncList, useListData, useTreeData} from '@react-stately/data'; import {useFilter} from '@react-aria/i18n'; @@ -997,20 +997,18 @@ let WithinScrollableContainerComboBox = (props) => {
+ width: '100%', + height: '100vh', + overflowY: 'auto', + position: 'relative' + }}>
+ paddingTop: '50vh', + height: '150vh', + display: 'flex', + justifyContent: 'center' + }}> Item #1 Item #2 @@ -1019,4 +1017,4 @@ let WithinScrollableContainerComboBox = (props) => {
); -}; \ No newline at end of file +}; diff --git a/packages/@react-spectrum/combobox/test/ComboBox.test.js b/packages/@react-spectrum/combobox/test/ComboBox.test.js index b10b4c9ba09..20024056908 100644 --- a/packages/@react-spectrum/combobox/test/ComboBox.test.js +++ b/packages/@react-spectrum/combobox/test/ComboBox.test.js @@ -1041,14 +1041,22 @@ describe('ComboBox', function () { expect(onSelectionChange).not.toHaveBeenCalled(); }); - it('should close menu on scroll', async () => { + it('should close menu on scroll', function () { let {getByRole} = renderComboBox(); - + let button = getByRole('button'); - userEvent.click(button); + triggerPress(button); + act(() => { + jest.runAllTimers(); + }); + let listbox = getByRole('listbox'); expect(listbox).toBeInTheDocument(); fireEvent.scroll(document.body); + act(() => { + jest.runAllTimers(); + }); + expect(listbox).not.toBeInTheDocument(); }); diff --git a/packages/react-aria-components/test/ComboBox.test.js b/packages/react-aria-components/test/ComboBox.test.js index c478f8b6487..38d61b3bda2 100644 --- a/packages/react-aria-components/test/ComboBox.test.js +++ b/packages/react-aria-components/test/ComboBox.test.js @@ -12,9 +12,8 @@ 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 {fireEvent, render, within} from '@react-spectrum/test-utils'; import userEvent from '@testing-library/user-event'; let TestComboBox = (props) => ( @@ -260,15 +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'); - userEvent.click(button); + await userEvent.click(button); let listbox = getByRole('listbox'); expect(listbox).toBeInTheDocument(); fireEvent.scroll(document.body); expect(listbox).not.toBeInTheDocument(); - }) + }); }); From 4a7728baf58e542ebff42c33bc0fdb8fc47273dc Mon Sep 17 00:00:00 2001 From: Soufiane Boutahlil Date: Fri, 1 Dec 2023 20:37:00 +0100 Subject: [PATCH 8/9] remove story --- .../combobox/stories/ComboBox.stories.tsx | 42 +------------------ 1 file changed, 2 insertions(+), 40 deletions(-) diff --git a/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx b/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx index 6c4dc70223a..a2b32271a5e 100644 --- a/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx +++ b/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx @@ -29,7 +29,7 @@ import {Flex} from '@react-spectrum/layout'; import {Heading, Text} from '@react-spectrum/text'; import {Key} from '@react-types/shared'; import {Link} from '@react-spectrum/link'; -import React, {useEffect, useRef, useState} from 'react'; +import React, {useRef, useState} from 'react'; import {useAsyncList, useListData, useTreeData} from '@react-stately/data'; import {useFilter} from '@react-aria/i18n'; @@ -449,10 +449,6 @@ export const InDialog: ComboBoxStory = { name: 'within a dialog' }; -export const WithinScrollableElement: ComboBoxStory = { - render: (args) => -}; - export const WHCM: ComboBoxStory = { render: () => ( @@ -1008,38 +1004,4 @@ function ComboBoxWithinDialog(props) { )} ); -} - -let WithinScrollableContainerComboBox = (props) => { - const [root, setRoot] = useState(null); - const element = useRef(); - - useEffect(() => { - setRoot(element.current); - }, []); - - return ( -
-
- - Item #1 - Item #2 - Item #3 - -
-
- ); -}; +} \ No newline at end of file From c360c7ccde6134ad0cecdfd1c64f9ba4c212fbd3 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Tue, 5 Dec 2023 09:46:16 -0800 Subject: [PATCH 9/9] fix lint --- packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx b/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx index a2b32271a5e..69437d2e7f4 100644 --- a/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx +++ b/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx @@ -1004,4 +1004,4 @@ function ComboBoxWithinDialog(props) { )} ); -} \ No newline at end of file +}