add onKeyDown Props that supports prevent default behavior

README.md

@@ -76,8 +76,9 @@ render(<Picker />, mountNode);
 | getPopupContainer | function(trigger) |  | to set the container of the floating layer, while the default is to create a div element in body |
 | onChange | Function(date: moment, dateString: string) |  | a callback function, can be executed when the selected time is changing |
 | onOpenChange | Function(open:boolean) |  | called when open/close picker |
-| onFocus | (evnet:React.FocusEventHandler<HTMLInputElement>) => void |  | called like input's on focus |
-| onBlur | (evnet:React.FocusEventHandler<HTMLInputElement>) => void |  | called like input's on blur |
+| onFocus | (event:React.FocusEventHandler<HTMLInputElement>) => void |  | called like input's on focus |
+| onBlur | (event:React.FocusEventHandler<HTMLInputElement>) => void |  | called like input's on blur |
+| onKeyDown | (event:React.KeyboardEventHandler<HTMLInputElemet>, preventDefaultBehaviors:void) => void |  | input on keydown event |
 | direction | String: ltr or rtl |  | Layout direction of picker component, it supports RTL direction too. |
 
 ### PickerPanel
@@ -102,7 +103,7 @@ render(<Picker />, mountNode);
 | renderExtraFooter | (mode) => React.Node |  | extra footer |
 | onSelect | Function(date: moment) |  | a callback function, can be executed when the selected time |
 | onPanelChange | Function(value: moment, mode) |  | callback when picker panel mode is changed |
-| onMouseDown | (evnet:React.MouseEventHandler<HTMLInputElement>) => void |  | callback when executed onMouseDown evnent |
+| onMouseDown | (event:React.MouseEventHandler<HTMLInputElement>) => void |  | callback when executed onMouseDown evnent |
 | direction | String: ltr or rtl |  | Layout direction of picker component, it supports RTL direction too. |
 
 ### RangePicker

examples/basic.tsx

@@ -29,6 +29,11 @@ export default () => {
     onChange,
   };
 
+  const keyDown = (e, preventDefaultBehaviors) => {
+    preventDefaultBehaviors();
+    console.log(e.keyCode);
+  };
+
   return (
     <div>
       <h1>Value: {value ? value.format('YYYY-MM-DD HH:mm:ss') : 'null'}</h1>
@@ -60,7 +65,7 @@ export default () => {
               defaultValue: moment('11:28:39', 'HH:mm:ss'),
             }}
             showToday
-            disabledTime={date => {
+            disabledTime={(date) => {
               if (date && date.isSame(defaultValue, 'date')) {
                 return {
                   disabledHours: () => [1, 3, 5, 7, 9, 11],
@@ -125,6 +130,10 @@ export default () => {
           <h3>Keyboard navigation (Tab key) disabled</h3>
           <Picker<Moment> {...sharedProps} locale={enUS} tabIndex={-1} />
         </div>
+        <div style={{ margin: '0 8px' }}>
+          <h3>Keyboard event with disabled key</h3>
+          <Picker<Moment> {...sharedProps} locale={enUS} onKeyDown={keyDown} tabIndex={-1} />
+        </div>
       </div>
     </div>
   );

src/Picker.tsx

@@ -77,6 +77,7 @@ export interface PickerSharedProps<DateType> extends React.AriaAttributes {
   onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
   onContextMenu?: React.MouseEventHandler<HTMLDivElement>;
+  onKeyDown?: (e, preventDefaultBehaviors) => void;
 
   // Internal
   /** @private Internal usage, do not use in production mode!!! */
@@ -170,6 +171,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     onMouseLeave,
     onContextMenu,
     onClick,
+    onKeyDown,
     onSelect,
     direction,
     autoComplete = 'off',
@@ -310,6 +312,9 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
       setSelectedValue(mergedValue);
       resetText();
     },
+    onKeyDown: (e, preventDefaultBehaviors) => {
+      if (onKeyDown) onKeyDown(e, preventDefaultBehaviors);
+    },
     onFocus,
     onBlur,
   });

src/RangePicker.tsx

@@ -210,6 +210,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     onFocus,
     onBlur,
     onOk,
+    onKeyDown,
     components,
     order,
     direction,
@@ -610,12 +611,18 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     ...getSharedInputHookProps(0, resetStartText),
     open: startOpen,
     value: startText,
+    onKeyDown: (e, preventDefaultBehaviors) => {
+      if (onKeyDown) onKeyDown(e, preventDefaultBehaviors);
+    },
   });
 
   const [endInputProps, { focused: endFocused, typing: endTyping }] = usePickerInput({
     ...getSharedInputHookProps(1, resetEndText),
     open: endOpen,
     value: endText,
+    onKeyDown: (e, preventDefaultBehaviors) => {
+      if (onKeyDown) onKeyDown(e, preventDefaultBehaviors);
+    },
   });
 
   // ========================== Click Picker ==========================

src/hooks/usePickerInput.ts

@@ -9,6 +9,7 @@ export default function usePickerInput({
   isClickOutside,
   triggerOpen,
   forwardKeyDown,
+  onKeyDown,
   blurToCancel,
   onSubmit,
   onCancel,
@@ -20,6 +21,10 @@ export default function usePickerInput({
   isClickOutside: (clickElement: EventTarget | null) => boolean;
   triggerOpen: (open: boolean) => void;
   forwardKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => boolean;
+  onKeyDown: (
+    e: React.KeyboardEvent<HTMLInputElement>,
+    preventDefaultBehaviors: () => void,
+  ) => void;
   blurToCancel?: boolean;
   onSubmit: () => void | boolean;
   onCancel: () => void;
@@ -28,6 +33,7 @@ export default function usePickerInput({
 }): [React.DOMAttributes<HTMLInputElement>, { focused: boolean; typing: boolean }] {
   const [typing, setTyping] = useState(false);
   const [focused, setFocused] = useState(false);
+  const [preventDefault, setPreventDefault] = useState(false);
 
   /**
    * We will prevent blur to handle open event when user click outside,
@@ -43,43 +49,53 @@ export default function usePickerInput({
       triggerOpen(true);
     },
     onKeyDown: e => {
-      switch (e.which) {
-        case KeyCode.ENTER: {
-          if (!open) {
-            triggerOpen(true);
-          } else if (onSubmit() !== false) {
-            setTyping(true);
-          }
+      if (onKeyDown) {
+        const preventDefaultBehaviors = (): void => {
+          setPreventDefault(true);
+        };
 
-          e.preventDefault();
-          return;
-        }
+        onKeyDown(e, preventDefaultBehaviors);
+      }
 
-        case KeyCode.TAB: {
-          if (typing && open && !e.shiftKey) {
-            setTyping(false);
-            e.preventDefault();
-          } else if (!typing && open) {
-            if (!forwardKeyDown(e) && e.shiftKey) {
+      if (preventDefault === false) {
+        switch (e.which) {
+          case KeyCode.ENTER: {
+            if (!open) {
+              triggerOpen(true);
+            } else if (onSubmit() !== false) {
               setTyping(true);
+            }
+
+            e.preventDefault();
+            return;
+          }
+
+          case KeyCode.TAB: {
+            if (typing && open && !e.shiftKey) {
+              setTyping(false);
               e.preventDefault();
+            } else if (!typing && open) {
+              if (!forwardKeyDown(e) && e.shiftKey) {
+                setTyping(true);
+                e.preventDefault();
+              }
             }
+            return;
           }
-          return;
-        }
 
-        case KeyCode.ESC: {
-          setTyping(true);
-          onCancel();
-          return;
+          case KeyCode.ESC: {
+            setTyping(true);
+            onCancel();
+            return;
+          }
         }
-      }
 
-      if (!open && ![KeyCode.SHIFT].includes(e.which)) {
-        triggerOpen(true);
-      } else if (!typing) {
-        // Let popup panel handle keyboard
-        forwardKeyDown(e);
+        if (!open && ![KeyCode.SHIFT].includes(e.which)) {
+          triggerOpen(true);
+        } else if (!typing) {
+          // Let popup panel handle keyboard
+          forwardKeyDown(e);
+        }
       }
     },