feat: add onkeydown to autocomplete (#1153)

content/input/autocomplete/index-en-US.md

@@ -388,6 +388,7 @@ import { IllustrationNoContent } from '@douyinfe/semi-illustrations';
 | onBlur | Callback when the focus is lost | Function(event) | |
 | onChange | Input box change / change when the candidate is selected | Function(value:string\|number) | | 1.23.0|
 | onFocus | The callback when the focus is obtained | Function(event) | |
+| onKeyDown | keydown callback | (e: React.KeyboardEvent) => void | | 2.21.0 |
 | onSearch | Callback when input changes | Function(value: string) | |
 | onSelect | Callback when the drop-down menu candidate is selected | Function(item: string\|number\|Item) | |
 

content/input/autocomplete/index.md

@@ -403,6 +403,7 @@ import { IllustrationNoContent } from '@douyinfe/semi-illustrations';
 | onBlur | 失去焦点时的回调 | Function(event) | |
 | onChange | 输入框变化/候选项选中时变化 | Function(value:string\|number) | |1.23.0 |
 | onFocus | 获得焦点时的回调 | Function(event) | |
+| onKeyDown | keydown 回调 | (e: React.KeyboardEvent) => void | | 2.21.0 |
 | onSearch | 输入变化时的回调 | Function(value: string) | |
 | onSelect | 下拉菜单候选项被选中时的回调 | Function(item: string\|number\|Item) | |
 

packages/semi-foundation/autoComplete/foundation.ts

@@ -8,6 +8,7 @@ interface KeyboardAdapter<P = Record<string, any>, S = Record<string, any>> exte
     registerKeyDown: (callback: (event: any) => void) => void;
     unregisterKeyDown: (callback: (event: any) => void) => void;
     updateFocusIndex: (focusIndex: number) => void;
+    notifyKeyDown: (e: any) => void;
 }
 
 export interface DataItem {
@@ -336,6 +337,7 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
             default:
                 break;
         }
+        this._adapter.notifyKeyDown(event);
     }
 
     _getEnableFocusIndex(offset: number) {

packages/semi-ui/autoComplete/_story/autoComplete.stories.js

@@ -345,4 +345,6 @@ export const ControlledValue = () => <ControlledMode />;
 
 export const CustomTriggerDemo = () => <CustomTrigger />;
 
-export const Disabled = () => <AutoComplete disabled />;
+export const Disabled = () => <AutoComplete disabled />;
+
+export const KeyDown = () => <AutoComplete onKeyDown={(e) => { console.log('onKeyDown', e.keyCode) }} />;

packages/semi-ui/autoComplete/index.tsx

@@ -76,6 +76,7 @@ export interface AutoCompleteProps<T extends AutoCompleteItems> {
     onChangeWithObject?: boolean;
     onSelectWithObject?: boolean;
     onDropdownVisibleChange?: (visible: boolean) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     prefix?: React.ReactNode;
     placeholder?: string;
     position?: Position;
@@ -137,6 +138,7 @@ class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoComple
         onBlur: PropTypes.func,
         onFocus: PropTypes.func,
         onChange: PropTypes.func,
+        onKeyDown: PropTypes.func,
         position: PropTypes.oneOf(positionSet),
         placeholder: PropTypes.string,
         prefix: PropTypes.node,
@@ -185,6 +187,7 @@ class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoComple
         validateStatus: 'default' as const,
         autoFocus: false,
         emptyContent: null as null,
+        onKeyDown: noop,
         // onPressEnter: () => undefined,
         // defaultOpen: false,
     };
@@ -283,6 +286,9 @@ class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoComple
             notifyBlur: (event: React.FocusEvent) => {
                 this.props.onBlur(event);
             },
+            notifyKeyDown: e => {
+                this.props.onKeyDown(e);
+            },
             rePositionDropdown: () => {
                 let { rePosKey } = this.state;
                 rePosKey = rePosKey + 1;