fix(#2468): Combobox: onKeyDown event will now be triggered per docs (#2674)

* onKeyDown event will now be triggered per docs

* Changes per review feedback

Co-authored-by: Justin Skinner <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>

Author: 3 people

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

@@ -162,7 +162,7 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
   let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField({
     ...props,
     onChange: state.setInputValue,
-    onKeyDown: !isReadOnly && chain(state.isOpen && collectionProps.onKeyDown, onKeyDown),
+    onKeyDown: !isReadOnly && chain(state.isOpen && collectionProps.onKeyDown, onKeyDown, props.onKeyDown),
     onBlur,
     value: state.inputValue,
     onFocus,

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

@@ -860,6 +860,8 @@ let CustomValueComboBox = (props) => {
     setSelectedKey(key);
   };
 
+  actions['onKeyDown'] = action('onKeyDown');
+
   return (
     <div>
       <div>Selected Key: {selectedKey}</div>

packages/@react-spectrum/combobox/test/ComboBox.test.js

@@ -39,6 +39,7 @@ let outerBlur = jest.fn();
 let onFocus = jest.fn();
 let onBlur = jest.fn();
 let onLoadMore = jest.fn();
+let onKeyDown = jest.fn();
 
 let defaultProps = {
   label: 'Test',
@@ -937,7 +938,7 @@ describe('ComboBox', function () {
     });
 
     it('closes menu and resets selected key if allowsCustomValue=true and no item is focused', function () {
-      let {getByRole, queryByRole} = render(<ExampleComboBox allowsCustomValue selectedKey="2" />);
+      let {getByRole, queryByRole} = render(<ExampleComboBox allowsCustomValue selectedKey="2" onKeyDown={onKeyDown} />);
 
       let combobox = getByRole('combobox');
       act(() => combobox.focus());
@@ -959,6 +960,7 @@ describe('ComboBox', function () {
       });
 
       expect(queryByRole('listbox')).toBeNull();
+      expect(onKeyDown).toHaveBeenCalledTimes(1);
       expect(onSelectionChange).toHaveBeenCalledTimes(1);
       expect(onSelectionChange).toHaveBeenCalledWith(null);
       expect(onOpenChange).toHaveBeenCalledTimes(2);