feat: [TagInput] support onKeyDown #255 (#270)

Co-authored-by: chenyuling <[email protected]>

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

@@ -442,6 +442,7 @@ class CustomRender extends React.Component {
 |onFocus       |Callback invoked when input gets focus           |(e:React.MouseEvent<HTMLInputElement\>) => void                  | -        |1.19.0|
 |onInputChange |Callback invoked when input changes              |(value:string,e: React.KeyboardEvent<HTMLInputElement\>) => void)| -        |1.19.0|
 |onInputExceed |Callback invoked when maxLength is exceeded      |(value:string) => void                                           | -        |1.19.0|
+|onKeyDown    |Callback invoked when keydown                     |(e: React.KeyboardEvent<HTMLInputElement\>) => void          | -        |2.1.0|
 |onRemove      |Callback invoked when tags are removed           |(removedValue: string, idx: number) => void                                 | -        |1.19.0|
 
 ## Methods

content/input/taginput/index.md

@@ -442,6 +442,7 @@ class CustomRender extends React.Component {
 |onFocus      |输入框获取焦点时的回调                                |(e:React.MouseEvent<HTMLInputElement\>) => void               | -        |1.19.0|
 |onInputChange|输入框内容变化时的回调                                |(value:string,e: React.KeyboardEvent<HTMLInputElement\>) => void)  | -        |1.19.0|
 |onInputExceed|超过 maxLength 时的回调                             |(value:string) => void          | -        |1.19.0|
+|onKeyDown    |keydown 回调                             |(e: React.KeyboardEvent<HTMLInputElement\>) => void          | -        |2.1.0|
 |onRemove     |移除标签时的回调                                     |(removedValue: string, idx: number) => void     | -        |1.19.0|
 ## 方法
 

packages/semi-foundation/tagInput/foundation.ts

@@ -24,6 +24,7 @@ export interface TagInputAdapter extends DefaultAdapter {
     notifyTagChange: (v: string[]) => void;
     notifyTagAdd: (v: string[]) => void;
     notifyTagRemove: (v: string, idx: number) => void;
+    notifyKeyDown: (e: TagInputMouseEvent) => void;
 }
 
 class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
@@ -90,6 +91,7 @@ class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
             const removedTag = tagsArray[length - 1];
             this._onRemove(newTagList, removedTag, length - 1);
         }
+        this._adapter.notifyKeyDown(e);
     };
 
     _handleAddTags(e: TagInputChangeEvent) {

packages/semi-ui/tagInput/__test__/tagInput.test.js

@@ -338,4 +338,15 @@ describe('TagInput', () => {
         tagInput.update();
         expect(tagInput.find('input').getDOMNode().value).toEqual('hotsoon');
     })
+
+    it('TagInput with onKeyDown', () => {
+        const spyOnKeyDown = sinon.spy(value => { });
+        const props = {
+            onKeyDown: spyOnKeyDown,
+        };
+        const tagInput = getTagInput(props);
+        tagInput.find('input').simulate('keyDown', { keyCode: 13 });
+        expect(spyOnKeyDown.callCount).toEqual(1);
+        tagInput.unmount();
+    });
 })

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

@@ -341,3 +341,5 @@ stories.add('prefix / suffix', () => (
         <TagInput style={style} suffix="Suffix" showClear />
     </>
 ));
+
+stories.add('onKeyDown', () => <TagInput style={style} onKeyDown={e=>console.log(e)} />);

packages/semi-ui/tagInput/index.tsx

@@ -44,6 +44,7 @@ export interface TagInputProps {
     onFocus?: (e: React.MouseEvent<HTMLInputElement>) => void;
     onInputChange?: (value: string, e: React.MouseEvent<HTMLInputElement>) => void;
     onInputExceed?: ((value: string) => void);
+    onKeyDown?: (e: React.MouseEvent<HTMLInputElement>) => void;
     onRemove?: (removedValue: string, idx: number) => void;
     placeholder?: string;
     prefix?: React.ReactNode;
@@ -97,6 +98,7 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         onInputExceed: PropTypes.func,
         onAdd: PropTypes.func,
         onRemove: PropTypes.func,
+        onKeyDown: PropTypes.func,
         size: PropTypes.oneOf(strings.SIZE_SET),
         validateStatus: PropTypes.oneOf(strings.STATUS),
         prefix: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
@@ -120,7 +122,8 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         onExceed: noop,
         onInputExceed: noop,
         onAdd: noop,
-        onRemove: noop
+        onRemove: noop,
+        onKeyDown: noop,
     };
 
     inputRef: React.RefObject<HTMLInputElement>;
@@ -179,7 +182,10 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
             },
             notifyTagRemove: (v: string, idx: number) => {
                 this.props.onRemove(v, idx);
-            }
+            },
+            notifyKeyDown: e => {
+                this.props.onKeyDown(e);
+            },
         };
     }