Show all items when manually opening ComboBox menu

packages/@react-aria/combobox/src/useComboBox.ts

@@ -113,10 +113,10 @@ export function useComboBox<T>(props: AriaComboBoxProps<T>, state: ComboBoxState
         state.close();
         break;
       case 'ArrowDown':
-        state.open('first');
+        state.open('first', 'manual');
         break;
       case 'ArrowUp':
-        state.open('last');
+        state.open('last', 'manual');
         break;
       case 'ArrowLeft':
       case 'ArrowRight':
@@ -165,14 +165,14 @@ export function useComboBox<T>(props: AriaComboBoxProps<T>, state: ComboBoxState
     if (e.pointerType === 'touch') {
       // Focus the input field in case it isn't focused yet
       inputRef.current.focus();
-      state.toggle();
+      state.toggle(null, 'manual');
     }
   };
 
   let onPressStart = (e: PressEvent) => {
     if (e.pointerType !== 'touch') {
       inputRef.current.focus();
-      state.toggle((e.pointerType === 'keyboard' || e.pointerType === 'virtual') ? 'first' : null);
+      state.toggle((e.pointerType === 'keyboard' || e.pointerType === 'virtual') ? 'first' : null, 'manual');
     }
   };
 
@@ -211,7 +211,7 @@ export function useComboBox<T>(props: AriaComboBoxProps<T>, state: ComboBoxState
     if (touch.clientX === centerX && touch.clientY === centerY) {
       e.preventDefault();
       inputRef.current.focus();
-      state.toggle();
+      state.toggle(null, 'manual');
 
       lastEventTime.current = e.timeStamp;
     }

packages/@react-aria/combobox/test/useComboBox.test.js

@@ -21,8 +21,8 @@ import {useSingleSelectListState} from '@react-stately/list';
 describe('useComboBox', function () {
   let preventDefault = jest.fn();
   let stopPropagation = jest.fn();
-  let event = (key) => ({
-    key,
+  let event = (e) => ({
+    ...e,
     preventDefault,
     stopPropagation
   });
@@ -89,11 +89,53 @@ describe('useComboBox', function () {
     let {result, rerender} = renderHook((props) => useComboBox(props, useComboBoxState(props)), {initialProps: props});
     let {inputProps} = result.current;
 
-    inputProps.onKeyDown(event('Enter'));
+    inputProps.onKeyDown(event({key: 'Enter'}));
     expect(preventDefault).toHaveBeenCalledTimes(1);
 
     rerender({...props, isOpen: false});
-    result.current.inputProps.onKeyDown(event('Enter'));
+    result.current.inputProps.onKeyDown(event({key: 'Enter'}));
     expect(preventDefault).toHaveBeenCalledTimes(1);
   });
+
+  it('calls open and toggle with the expected parameters when arrow down/up/trigger button is pressed', function () {
+    let openSpy = jest.fn();
+    let toggleSpy = jest.fn();
+    let props = {
+      label: 'test label',
+      popoverRef: React.createRef(),
+      buttonRef: React.createRef(),
+      inputRef: {
+        current: {
+          contains: jest.fn(),
+          focus: jest.fn()
+        }
+      },
+      listBoxRef: React.createRef(),
+      layout: mockLayout,
+      isOpen: false
+    };
+
+    let {result: state} = renderHook((props) => useComboBoxState(props), {initialProps: props});
+    state.current.open = openSpy;
+    state.current.toggle = toggleSpy;
+
+    let {result} = renderHook((props) => useComboBox(props, state.current), {initialProps: props});
+    let {inputProps, buttonProps} = result.current;
+    inputProps.onKeyDown(event({key: 'ArrowDown'}));
+    expect(openSpy).toHaveBeenCalledTimes(1);
+    expect(openSpy).toHaveBeenLastCalledWith('first', 'manual');
+    expect(toggleSpy).toHaveBeenCalledTimes(0);
+    inputProps.onKeyDown(event({key: 'ArrowUp'}));
+    expect(openSpy).toHaveBeenCalledTimes(2);
+    expect(openSpy).toHaveBeenLastCalledWith('last', 'manual');
+    expect(toggleSpy).toHaveBeenCalledTimes(0);
+    buttonProps.onPress(event({pointerType: 'touch'}));
+    expect(openSpy).toHaveBeenCalledTimes(2);
+    expect(toggleSpy).toHaveBeenCalledTimes(1);
+    expect(toggleSpy).toHaveBeenLastCalledWith(null, 'manual');
+    buttonProps.onPressStart(event({pointerType: 'mouse'}));
+    expect(openSpy).toHaveBeenCalledTimes(2);
+    expect(toggleSpy).toHaveBeenCalledTimes(2);
+    expect(toggleSpy).toHaveBeenLastCalledWith(null, 'manual');
+  });
 });

packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx

@@ -87,6 +87,12 @@ storiesOf('ComboBox', module)
       </ComboBox>
     )
   )
+  .add(
+    'with mapped items (defaultItem and items undef)',
+    () => (
+      <ComboBoxWithMap defaultSelectedKey="two" />
+    )
+  )
   .add(
     'with sections',
     () => (
@@ -496,19 +502,39 @@ function ListDataExample() {
   let {contains} = useFilter({sensitivity: 'base'});
   let list = useListData({
     initialItems: items,
+    initialFilterText: 'Snake',
     filter(item, text) {
       return contains(item.name, text);
     }
   });
 
+  let [showAll, setShowAll] = useState(false);
+
   return (
-    <ComboBox
-      label="ComboBox"
-      items={list.items}
-      inputValue={list.filterText}
-      onInputChange={list.setFilterText}>
-      {item => <Item>{item.name}</Item>}
-    </ComboBox>
+    <Flex gap="size-300" direction="column" >
+      <ComboBox
+        onOpenChange={(open, reason) => {
+          if (reason === 'manual' && open) {
+            setShowAll(true);
+          }
+        }}
+        label="ComboBox (show all on open)"
+        items={showAll ? items : list.items}
+        inputValue={list.filterText}
+        onInputChange={(value) => {
+          setShowAll(false);
+          list.setFilterText(value);
+        }}>
+        {item => <Item>{item.name}</Item>}
+      </ComboBox>
+      <ComboBox
+        label="ComboBox (default controlled items behavior)"
+        items={list.items}
+        inputValue={list.filterText}
+        onInputChange={list.setFilterText}>
+        {item => <Item>{item.name}</Item>}
+      </ComboBox>
+    </Flex>
   );
 }
 
@@ -893,3 +919,32 @@ function render(props = {}) {
     </ComboBox>
   );
 }
+
+function ComboBoxWithMap(props) {
+  let [items, setItems] = React.useState([
+    {name: 'The first item', id: 'one'},
+    {name: 'The second item', id: 'two'},
+    {name: 'The third item', id: 'three'}
+  ]);
+
+  let onClick = () => {
+    setItems([
+      {name: 'The first item new text', id: 'one'},
+      {name: 'The second item new text', id: 'two'},
+      {name: 'The third item new text', id: 'three'}
+    ]);
+  };
+
+  return (
+    <Flex direction="column">
+      <button onClick={onClick}>Press to change items</button>
+      <ComboBox label="Combobox" {...mergeProps(props, actions)}>
+        {items.map((item) => (
+          <Item key={item.id}>
+            {item.name}
+          </Item>
+        ))}
+      </ComboBox>
+    </Flex>
+  );
+}