From 9699b45b6907960c9b1aee98be4c16522787068d Mon Sep 17 00:00:00 2001 From: Sofiya Huts Date: Wed, 5 Dec 2018 10:17:03 -0800 Subject: [PATCH 1/3] feat(FocusZone): Handle keyDownCapture based on client needs --- .../accessibility/Behaviors/Chat/chatBehavior.ts | 1 + src/lib/accessibility/FocusZone/FocusZone.tsx | 14 +++++++++----- src/lib/accessibility/FocusZone/FocusZone.types.ts | 5 +++++ 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/lib/accessibility/Behaviors/Chat/chatBehavior.ts b/src/lib/accessibility/Behaviors/Chat/chatBehavior.ts index e81a60c55c..5d3f9d71cd 100644 --- a/src/lib/accessibility/Behaviors/Chat/chatBehavior.ts +++ b/src/lib/accessibility/Behaviors/Chat/chatBehavior.ts @@ -21,6 +21,7 @@ const ChatBehavior: Accessibility = (props: any) => ({ props: { shouldEnterInnerZone: event => keyboardKey.getCode(event) === keyboardKey.Enter, direction: FocusZoneDirection.vertical, + shouldHandleKeyDownCapture: false, defaultTabbableElement: getLastTabbableElement, // select last chat message by default [CHAT_FOCUSZONE_ATTRIBUTE]: '', // allows querying the default active element }, diff --git a/src/lib/accessibility/FocusZone/FocusZone.tsx b/src/lib/accessibility/FocusZone/FocusZone.tsx index 253dd8efff..1b91f00d72 100644 --- a/src/lib/accessibility/FocusZone/FocusZone.tsx +++ b/src/lib/accessibility/FocusZone/FocusZone.tsx @@ -48,6 +48,7 @@ export class FocusZone extends React.Component implements IFocus defaultTabbableElement: PropTypes.func, shouldFocusOnMount: PropTypes.bool, shouldFocusFirstElementWhenReceivedFocus: PropTypes.bool, + shouldHandleKeyDownCapture: PropTypes.bool, disabled: PropTypes.bool, as: customPropTypes.as, isCircularNavigation: PropTypes.bool, @@ -66,6 +67,7 @@ export class FocusZone extends React.Component implements IFocus static defaultProps: FocusZoneProps = { isCircularNavigation: false, direction: FocusZoneDirection.bidirectional, + shouldHandleKeyDownCapture: true, as: 'div', } @@ -103,6 +105,8 @@ export class FocusZone extends React.Component implements IFocus public componentDidMount(): void { _allInstances[this._id] = this + const { shouldHandleKeyDownCapture, defaultTabbableElement, shouldFocusOnMount } = this.props + this.setRef(this) // called here to support functional components, we only need HTMLElement ref anyway if (this._root.current) { this.windowElement = getWindow(this._root.current) @@ -117,19 +121,19 @@ export class FocusZone extends React.Component implements IFocus parentElement = getParent(parentElement) } - if (!this._isInnerZone) { + if (!this._isInnerZone && shouldHandleKeyDownCapture) { this.windowElement.addEventListener('keydown', this.onKeyDownCapture, true) } // Assign initial tab indexes so that we can set initial focus as appropriate. this.updateTabIndexes() - if (this.props.defaultTabbableElement) { - const initialActiveElement = this.props.defaultTabbableElement(this._root.current) + if (defaultTabbableElement) { + const initialActiveElement = defaultTabbableElement(this._root.current) initialActiveElement && this.setActiveElement(initialActiveElement) } - if (this.props.shouldFocusOnMount) { + if (shouldFocusOnMount) { this.focus() } } @@ -137,7 +141,7 @@ export class FocusZone extends React.Component implements IFocus public componentWillUnmount() { delete _allInstances[this._id] - if (this.windowElement) { + if (this.windowElement && this.props.shouldHandleKeyDownCapture) { this.windowElement.removeEventListener('keydown', this.onKeyDownCapture, true) } } diff --git a/src/lib/accessibility/FocusZone/FocusZone.types.ts b/src/lib/accessibility/FocusZone/FocusZone.types.ts index f5f7cf8760..ebe385bf9e 100644 --- a/src/lib/accessibility/FocusZone/FocusZone.types.ts +++ b/src/lib/accessibility/FocusZone/FocusZone.types.ts @@ -58,6 +58,11 @@ export interface FocusZoneProps extends React.HTMLAttributes Date: Wed, 5 Dec 2018 10:25:41 -0800 Subject: [PATCH 2/3] Update FZ changelog --- src/lib/accessibility/FocusZone/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/accessibility/FocusZone/CHANGELOG.md b/src/lib/accessibility/FocusZone/CHANGELOG.md index fab2ed716d..a5b9ed3fe7 100644 --- a/src/lib/accessibility/FocusZone/CHANGELOG.md +++ b/src/lib/accessibility/FocusZone/CHANGELOG.md @@ -17,7 +17,7 @@ This is a list of changes made to this Stardust copy of FocusZone in comparison - Changed not to call `this.focus()` on component mount (this was causing issues e.g., in docsite, where every change in source code would refocus the mounted component). Instead, you can now use a new property `shouldFocusOnMount`. - Add `shouldFocusFirstElementWhenReceivedFocus` prop, which forces focus to first element when container receives focus @sophieH29 ([#469](https://github.com/stardust-ui/react/pull/469)) - +- Handle keyDownCapture based on `shouldHandleKeyDownCapture` prop @sophieH29 ([#563](https://github.com/stardust-ui/react/pull/563)) ### feat(FocusZone): Implement FocusZone into renderComponent [#116](https://github.com/stardust-ui/react/pull/116) - Prettier and linting fixes, e.g., removing semicolons, removing underscores from private methods. From b2148dc65a9b6a04b576a64e64cbcd0eb46d3447 Mon Sep 17 00:00:00 2001 From: Sofiya Huts Date: Tue, 11 Dec 2018 12:36:28 +0100 Subject: [PATCH 3/3] Update changelog --- CHANGELOG.md | 1 + src/lib/accessibility/FocusZone/FocusZone.types.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2118f286fb..46b8694cdb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -31,6 +31,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix styles for RTL mode of doc site component examples @kuzhelov ([#579](https://github.com/stardust-ui/react/pull/579)) - Prevent blind props forwarding for `createShorthand` calls if the value is a React element and remove manual check for `Input` `wrapper` @Bugaa92 ([#496](https://github.com/stardust-ui/react/pull/496)) - Fix issue with bundling package with Rollup and Parcel @layershifter ([#570](https://github.com/stardust-ui/react/pull/570)) +- Do not handle `FocusZone`'s keyDownCapture in `chatBehavior` @sophieH29 ([#563](https://github.com/stardust-ui/react/pull/563)) ### Features - `Ref` components uses `forwardRef` API by default @layershifter ([#491](https://github.com/stardust-ui/react/pull/491)) diff --git a/src/lib/accessibility/FocusZone/FocusZone.types.ts b/src/lib/accessibility/FocusZone/FocusZone.types.ts index ebe385bf9e..2d9336d34b 100644 --- a/src/lib/accessibility/FocusZone/FocusZone.types.ts +++ b/src/lib/accessibility/FocusZone/FocusZone.types.ts @@ -59,7 +59,7 @@ export interface FocusZoneProps extends React.HTMLAttributes