diff --git a/CHANGELOG.md b/CHANGELOG.md index 3740192ac3..bd9926fc49 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -33,6 +33,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix issue with bundling package with Rollup and Parcel @layershifter ([#570](https://github.com/stardust-ui/react/pull/570)) - Fix `pxToRem` referenced for `Dropdown` component styles @kuzhelov ([#590](https://github.com/stardust-ui/react/pull/590)) - Fix `Popup` logic of handling `content` value provided as React element @kuzhelov ([#592](https://github.com/stardust-ui/react/pull/592)) +- 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/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/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. diff --git a/src/lib/accessibility/FocusZone/FocusZone.tsx b/src/lib/accessibility/FocusZone/FocusZone.tsx index c874649c52..9be1567d53 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..2d9336d34b 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