feat(FocusZone): Handle keyDownCapture based on client needs

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))

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
     },

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.

src/lib/accessibility/FocusZone/FocusZone.tsx

@@ -48,6 +48,7 @@ export class FocusZone extends React.Component<FocusZoneProps> 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<FocusZoneProps> implements IFocus
   static defaultProps: FocusZoneProps = {
     isCircularNavigation: false,
     direction: FocusZoneDirection.bidirectional,
+    shouldHandleKeyDownCapture: true,
     as: 'div',
   }
 
@@ -103,6 +105,8 @@ export class FocusZone extends React.Component<FocusZoneProps> 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,27 +121,27 @@ export class FocusZone extends React.Component<FocusZoneProps> 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()
       }
     }
   }
 
   public componentWillUnmount() {
     delete _allInstances[this._id]
-    if (this.windowElement) {
+    if (this.windowElement && this.props.shouldHandleKeyDownCapture) {
       this.windowElement.removeEventListener('keydown', this.onKeyDownCapture, true)
     }
   }

src/lib/accessibility/FocusZone/FocusZone.types.ts

@@ -58,6 +58,11 @@ export interface FocusZoneProps extends React.HTMLAttributes<HTMLElement | Focus
    */
   shouldFocusFirstElementWhenReceivedFocus?: boolean
 
+  /**
+   * If global onKeyDownCapture should be handled and updating tab indexes.
+   */
+  shouldHandleKeyDownCapture?: boolean
+
   /**
    * If set, the FocusZone will not be tabbable and keyboard navigation will be disabled.
    * This does not affect disabled attribute of any child.