make S2 picker button not throw warning when rending in fake DOM

Author: LFDanLu

packages/@react-spectrum/s2/src/Picker.tsx

@@ -44,6 +44,7 @@ import {
 } from './Menu';
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronIcon from '../ui-icons/Chevron';
+import {createHideableComponent} from '@react-aria/collections';
 import {
   Divider,
   listbox,
@@ -463,7 +464,8 @@ interface PickerButtonInnerProps<T extends object> extends PickerStyleProps, Omi
   buttonRef: RefObject<HTMLButtonElement | null>
 }
 
-function PickerButton<T extends object>(props: PickerButtonInnerProps<T>) {
+// Needs to be hidable component or otherwise the PressResponder throws a warning when rendered in the fake DOM and tries to register
+const PickerButton = createHideableComponent(function PickerButton<T extends object>(props: PickerButtonInnerProps<T>) {
   let {
     isOpen,
     isQuiet,
@@ -555,7 +557,7 @@ function PickerButton<T extends object>(props: PickerButtonInnerProps<T>) {
       </Button>
     </PressResponder>
   );
-}
+});
 
 export interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {
   children: ReactNode

packages/@react-spectrum/s2/test/Combobox.test.tsx

@@ -154,7 +154,7 @@ describe('Combobox', () => {
     }
 
     // A bit contrived, but essentially testing a combinaiton of insertions/deletions along side some of the old entries remaining
-    let newItems = [{name: 'Chocolate Mint'}, {name: 'Chocolate'}, {name: 'Chocolate Chip'}, {name: 'Chocolate Chip Cookie Dough'}]
+    let newItems = [{name: 'Chocolate Mint'}, {name: 'Chocolate'}, {name: 'Chocolate Chip'}, {name: 'Chocolate Chip Cookie Dough'}];
     tree.rerender(<DynamicCombobox items={newItems} loadingState="idle" />);
 
     options = comboboxTester.options();

packages/@react-spectrum/s2/test/Picker.test.tsx

@@ -25,7 +25,7 @@ describe('Picker', () => {
         label="Test picker"
         items={items}
         isLoading={isLoading}
-         onLoadMore={onLoadMore}>
+        onLoadMore={onLoadMore}>
         {(item: any) => <PickerItem id={item.name} textValue={item.name}>{item.name}</PickerItem>}
       </Picker>
     );
@@ -46,7 +46,7 @@ describe('Picker', () => {
     jest.restoreAllMocks();
   });
 
-  it.skip('should only call loadMore whenever intersection is detected', async () => {
+  it('should only call loadMore whenever intersection is detected', async () => {
     let onLoadMore = jest.fn();
     let observe = jest.fn();
     let observer = setupIntersectionObserverMock({
@@ -92,7 +92,7 @@ describe('Picker', () => {
     expect(onLoadMore).toHaveBeenCalledTimes(2);
   });
 
-  it.skip('should properly calculate the expected row index values', async () => {
+  it('should properly calculate the expected row index values', async () => {
     let items = [{name: 'Chocolate'}, {name: 'Mint'}, {name: 'Chocolate Chip'}];
     let tree = render(<DynamicPicker items={items} />);
 
@@ -109,7 +109,7 @@ describe('Picker', () => {
       expect(option).toHaveAttribute('aria-posinset', `${index + 1}`);
     }
 
-    let newItems = [...items, {name: 'Chocolate Mint'}, {name: 'Chocolate Chip Cookie Dough'}]
+    let newItems = [...items, {name: 'Chocolate Mint'}, {name: 'Chocolate Chip Cookie Dough'}];
     tree.rerender(<DynamicPicker items={newItems} />);
 
     options = selectTester.options();