Browse Source

feat: autocomplete onkeydown

pointhalo 3 years ago
parent
commit
80605f657a

+ 2 - 0
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) {

+ 3 - 1
packages/semi-ui/autoComplete/_story/autoComplete.stories.jsx

@@ -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) }} />;

+ 6 - 0
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;