{"files":[{"path":"packages\/react-events\/src\/dom\/Keyboard.js","status":"M"},{"path":"packages\/react-events\/src\/dom\/__tests__\/Keyboard-test.internal.js","status":"M"}],"patch":"diff --git a\/packages\/react-events\/src\/dom\/Keyboard.js b\/packages\/react-events\/src\/dom\/Keyboard.js\nindex f692605968..00f4ffb16a 100644\n--- a\/packages\/react-events\/src\/dom\/Keyboard.js\n+++ b\/packages\/react-events\/src\/dom\/Keyboard.js\n@@ -22,6 +22,7 @@ type KeyboardProps = {\n disabled: boolean,\n onKeyDown: (e: KeyboardEvent) => void,\n onKeyUp: (e: KeyboardEvent) => void,\n+ preventKeys: Array,\n };\n \n type KeyboardEvent = {|\n@@ -36,9 +37,12 @@ type KeyboardEvent = {|\n target: Element | Document,\n type: KeyboardEventType,\n timeStamp: number,\n+ defaultPrevented: boolean,\n |};\n \n-const targetEventTypes = ['keydown', 'keyup'];\n+const isArray = Array.isArray;\n+const targetEventTypes = ['keydown_active', 'keyup'];\n+const modifiers = ['altKey', 'ctrlKey', 'metaKey', 'shiftKey'];\n \n \/**\n * Normalization of deprecated HTML5 `key` values\n@@ -107,7 +111,7 @@ function isFunction(obj): boolean {\n return typeof obj === 'function';\n }\n \n-function getEventKey(nativeEvent): string {\n+function getEventKey(nativeEvent: Object): string {\n const nativeKey = nativeEvent.key;\n if (nativeKey) {\n \/\/ Normalize inconsistent values reported by browsers due to\n@@ -128,6 +132,7 @@ function createKeyboardEvent(\n context: ReactDOMResponderContext,\n type: KeyboardEventType,\n target: Document | Element,\n+ defaultPrevented: boolean,\n ): KeyboardEvent {\n const nativeEvent = (event: any).nativeEvent;\n const {\n@@ -143,6 +148,7 @@ function createKeyboardEvent(\n return {\n altKey,\n ctrlKey,\n+ defaultPrevented,\n isComposing,\n key: getEventKey(nativeEvent),\n location,\n@@ -161,8 +167,15 @@ function dispatchKeyboardEvent(\n context: ReactDOMResponderContext,\n type: KeyboardEventType,\n target: Element | Document,\n+ defaultPrevented: boolean,\n ): void {\n- const syntheticEvent = createKeyboardEvent(event, context, type, target);\n+ const syntheticEvent = createKeyboardEvent(\n+ event,\n+ context,\n+ type,\n+ target,\n+ defaultPrevented,\n+ );\n context.dispatchEvent(syntheticEvent, listener, DiscreteEvent);\n }\n \n@@ -174,11 +187,39 @@ const keyboardResponderImpl = {\n props: KeyboardProps,\n ): void {\n const {responderTarget, type} = event;\n+ const nativeEvent: any = event.nativeEvent;\n \n if (props.disabled) {\n return;\n }\n+ let defaultPrevented = nativeEvent.defaultPrevented === true;\n if (type === 'keydown') {\n+ const preventKeys = props.preventKeys;\n+ if (!defaultPrevented && isArray(preventKeys)) {\n+ preventKeyLoop: for (let i = 0; i < preventKeys.length; i++) {\n+ const preventKey = preventKeys[i];\n+ let key = preventKey;\n+\n+ if (isArray(preventKey)) {\n+ key = preventKey[0];\n+ const config = ((preventKey[1]: any): Object);\n+ for (let s = 0; s < modifiers.length; s++) {\n+ const modifier = modifiers[s];\n+ if (\n+ (config[modifier] && !nativeEvent[modifier]) ||\n+ (!config[modifier] && nativeEvent[modifier])\n+ ) {\n+ continue preventKeyLoop;\n+ }\n+ }\n+ }\n+ if (key === getEventKey(nativeEvent)) {\n+ defaultPrevented = true;\n+ nativeEvent.preventDefault();\n+ break;\n+ }\n+ }\n+ }\n const onKeyDown = props.onKeyDown;\n if (isFunction(onKeyDown)) {\n dispatchKeyboardEvent(\n@@ -187,6 +228,7 @@ const keyboardResponderImpl = {\n context,\n 'keydown',\n ((responderTarget: any): Element | Document),\n+ defaultPrevented,\n );\n }\n } else if (type === 'keyup') {\n@@ -198,6 +240,7 @@ const keyboardResponderImpl = {\n context,\n 'keyup',\n ((responderTarget: any): Element | Document),\n+ defaultPrevented,\n );\n }\n }\ndiff --git a\/packages\/react-events\/src\/dom\/__tests__\/Keyboard-test.internal.js b\/packages\/react-events\/src\/dom\/__tests__\/Keyboard-test.internal.js\nindex f5688b56c6..412aaa84b9 100644\n--- a\/packages\/react-events\/src\/dom\/__tests__\/Keyboard-test.internal.js\n+++ b\/packages\/react-events\/src\/dom\/__tests__\/Keyboard-test.internal.js\n@@ -92,6 +92,134 @@ describe('Keyboard event responder', () => {\n });\n });\n \n+ describe('preventKeys', () => {\n+ it('onKeyDown is default prevented', () => {\n+ const onKeyDown = jest.fn();\n+ const ref = React.createRef();\n+ const Component = () => {\n+ const listener = useKeyboard({\n+ onKeyDown,\n+ preventKeys: ['Tab'],\n+ });\n+ return

;\n+ };\n+ ReactDOM.render(, container);\n+\n+ const preventDefault = jest.fn();\n+ const target = createEventTarget(ref.current);\n+ target.keydown({key: 'Tab', preventDefault});\n+ expect(onKeyDown).toHaveBeenCalledTimes(1);\n+ expect(preventDefault).toBeCalled();\n+ expect(onKeyDown).toHaveBeenCalledWith(\n+ expect.objectContaining({\n+ key: 'Tab',\n+ type: 'keydown',\n+ defaultPrevented: true,\n+ }),\n+ );\n+ });\n+\n+ it('onKeyDown is default prevented (falsy modifier keys)', () => {\n+ let onKeyDown = jest.fn();\n+ let ref = React.createRef();\n+ let Component = () => {\n+ const listener = useKeyboard({\n+ onKeyDown,\n+ preventKeys: [['Tab', {metaKey: false}]],\n+ });\n+ return

;\n+ };\n+ ReactDOM.render(, container);\n+\n+ let preventDefault = jest.fn();\n+ let target = createEventTarget(ref.current);\n+ target.keydown({key: 'Tab', preventDefault, metaKey: true});\n+ expect(onKeyDown).toHaveBeenCalledTimes(1);\n+ expect(preventDefault).not.toBeCalled();\n+ expect(onKeyDown).toHaveBeenCalledWith(\n+ expect.objectContaining({\n+ key: 'Tab',\n+ type: 'keydown',\n+ defaultPrevented: false,\n+ }),\n+ );\n+\n+ onKeyDown = jest.fn();\n+ ref = React.createRef();\n+ Component = () => {\n+ const listener = useKeyboard({\n+ onKeyDown,\n+ preventKeys: [['Tab', {metaKey: true}]],\n+ });\n+ return

;\n+ };\n+ ReactDOM.render(, container);\n+\n+ preventDefault = jest.fn();\n+ target = createEventTarget(ref.current);\n+ target.keydown({key: 'Tab', preventDefault, metaKey: false});\n+ expect(onKeyDown).toHaveBeenCalledTimes(1);\n+ expect(preventDefault).not.toBeCalled();\n+ expect(onKeyDown).toHaveBeenCalledWith(\n+ expect.objectContaining({\n+ key: 'Tab',\n+ type: 'keydown',\n+ defaultPrevented: false,\n+ }),\n+ );\n+ });\n+\n+ it('onKeyDown is default prevented (truthy modifier keys)', () => {\n+ let onKeyDown = jest.fn();\n+ let ref = React.createRef();\n+ let Component = () => {\n+ const listener = useKeyboard({\n+ onKeyDown,\n+ preventKeys: [['Tab', {metaKey: true}]],\n+ });\n+ return

;\n+ };\n+ ReactDOM.render(, container);\n+\n+ let preventDefault = jest.fn();\n+ let target = createEventTarget(ref.current);\n+ target.keydown({key: 'Tab', preventDefault, metaKey: true});\n+ expect(onKeyDown).toHaveBeenCalledTimes(1);\n+ expect(preventDefault).toBeCalled();\n+ expect(onKeyDown).toHaveBeenCalledWith(\n+ expect.objectContaining({\n+ key: 'Tab',\n+ type: 'keydown',\n+ defaultPrevented: true,\n+ }),\n+ );\n+\n+ onKeyDown = jest.fn();\n+ ref = React.createRef();\n+ Component = () => {\n+ const listener = useKeyboard({\n+ onKeyDown,\n+ preventKeys: [['Tab', {metaKey: false}]],\n+ });\n+ return

;\n+ };\n+ ReactDOM.render(, container);\n+\n+ preventDefault = jest.fn();\n+ target = createEventTarget(ref.current);\n+ target.keydown({key: 'Tab', preventDefault, metaKey: false});\n+ expect(onKeyDown).toHaveBeenCalledTimes(1);\n+ expect(preventDefault).toBeCalled();\n+ expect(onKeyDown).toHaveBeenCalledWith(\n+ expect.objectContaining({\n+ key: 'Tab',\n+ type: 'keydown',\n+ defaultPrevented: true,\n+ }),\n+ );\n+ });\n+ });\n+\n describe('onKeyUp', () => {\n let onKeyDown, onKeyUp, ref;\n \n","commit":{"revision":"af032764a9f244633eb7ff1a3205d2ec6073b501","authorName":"Dominic Gannaway","subject":"[react-events] Adds preventKeys support to Keyboard responder (#16642)","authorEmail":"trueadm@users.noreply.github.com","authoredAt":"2019-09-04T01:38:36+01:00","shortRevision":"af032764a9"},"parents":["f705e2bac7582b2114f381f14546ff6ca02436b9"],"body":""}

dillon1000/react

Files changed