feat(List): new prop for enabling event propagation

momentum-design · Apr 6, 2020 · cb189c4 · cb189c4
1 parent 6168b39
commit cb189c4
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 3 deletions.
diff --git a/react/src/lib/DeviceListCall/tests/__snapshots__/index.spec.js.snap b/react/src/lib/DeviceListCall/tests/__snapshots__/index.spec.js.snap
@@ -72,6 +72,7 @@ ShallowWrapper {
       "shouldFocusActive": false,
       "shouldFocusInitial": true,
       "shouldLoop": true,
+      "shouldPropagateKeyDown": false,
       "tabType": "vertical",
       "trackActive": true,
       "type": null,
@@ -164,6 +165,7 @@ ShallowWrapper {
         "shouldFocusActive": false,
         "shouldFocusInitial": true,
         "shouldLoop": true,
+        "shouldPropagateKeyDown": false,
         "tabType": "vertical",
         "trackActive": true,
         "type": null,

diff --git a/react/src/lib/List/examples/KitchenSink.js b/react/src/lib/List/examples/KitchenSink.js
@@ -3,6 +3,7 @@ import {
   ListDefault,
   ListListItemHeader,
   ListListItemSeparator,
+  ListWithEventBubbling,
 } from './index';
 
 export default class ListKitchenSink extends React.Component {
@@ -12,6 +13,7 @@ export default class ListKitchenSink extends React.Component {
         <ListDefault />
         <ListListItemHeader />
         <ListListItemSeparator />
+        <ListWithEventBubbling />
       </React.Fragment>
     );
   }

diff --git a/react/src/lib/List/examples/ListWithEventBubbling.js b/react/src/lib/List/examples/ListWithEventBubbling.js
@@ -0,0 +1,40 @@
+/* eslint-disable no-console */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React from 'react';
+import {Checkbox, List, ListItem} from '@momentum-ui/react';
+
+export default class ListWithEventBubbling extends React.PureComponent {
+
+    state = {
+        enableBubbling: true
+    };
+
+    onChange = (e) => {
+        this.setState({ enableBubbling: e.target.checked });
+    };
+
+    bubbledEventHandler = (e) => {
+        console.log(`KeyDown Event \nKeyCode: ${e.keyCode} \nKey: ${e.key}`);
+    };
+
+    render() {
+        return(
+            <div>
+                <div className="medium-4 columns" onKeyDown={this.bubbledEventHandler}>
+                <List shouldPropagateKeyDown={this.state.enableBubbling}>
+                    <ListItem label='List Item 1' />
+                    <ListItem label='List Item 2' />
+                    <ListItem label='List Item 3' />
+                    <ListItem label='List Item 4' />
+                </List>
+                </div>
+            <Checkbox
+                checked={this.state.enableBubbling}
+                onChange={this.onChange}
+                label='Enable Event Bubbling (See Console)'
+                htmlId={`checkbox-for-event-bubbling`}
+            />
+          </div>
+        );
+    }
+}
diff --git a/react/src/lib/List/examples/index.js b/react/src/lib/List/examples/index.js
@@ -2,3 +2,4 @@ export { default as ListDefault } from './Default';
 export { default as ListKitchenSink } from './KitchenSink';
 export { default as ListListItemHeader } from './ListItemHeader';
 export { default as ListListItemSeparator } from './ListItemSeparator';
+export { default as ListWithEventBubbling } from './ListWithEventBubbling';
diff --git a/react/src/lib/List/index.js b/react/src/lib/List/index.js
@@ -133,7 +133,7 @@ class List extends React.Component {
   }
 
   handleKeyDown = e => {
-    const { shouldFocusActive } = this.props;
+    const { shouldFocusActive, shouldPropagateKeyDown} = this.props;
     const { focus } = this.state.listContext;
     let clickEvent;
     const tgt = e.currentTarget;
@@ -177,14 +177,14 @@ class List extends React.Component {
       case 37:
         this.getNextFocusedChild(items, tgt, -1);
         this._needsRefocus = true;
-        flag = true;
+        if(!shouldPropagateKeyDown) flag = true;
         break;
 
       case 39:
       case 40:
         this.getNextFocusedChild(items, tgt, 1);
         this._needsRefocus = true;
-        flag = true;
+        if(!shouldPropagateKeyDown) flag = true;
         break;
 
       case 33:
@@ -354,6 +354,7 @@ class List extends React.Component {
       'focusFirstQuery',
       'focusQuery',
       'itemRole',
+      'shouldPropagateKeyDown',
       'shouldFocusActive',
       'shouldFocusInitial',
       'shouldLoop',
@@ -422,6 +423,8 @@ List.propTypes = {
   itemRole: PropTypes.string,
   /** @prop Callback function invoked by user selecting an interactive item within List | null */
   onSelect: PropTypes.func,
+  /** @prop Disables the stopPropagation() & preventDefault() for ArrowKey Events | false */  
+  shouldPropagateKeyDown: PropTypes.bool,
   /** @prop Sets the ARIA role for the Nav, in the context of a TabContainer | 'list' */
   role: PropTypes.string,
   /** @prop Invokes dom focus method on mount | true */
@@ -451,6 +454,7 @@ List.defaultProps = {
   focusFirstQuery: '',
   focusQuery: '',
   onSelect: null,
+  shouldPropagateKeyDown: false,
   role: 'list',
   shouldFocusActive: false,
   shouldFocusInitial: true,

diff --git a/react/src/lib/List/tests/__snapshots__/index.spec.js.snap b/react/src/lib/List/tests/__snapshots__/index.spec.js.snap
@@ -17,6 +17,7 @@ ShallowWrapper {
     shouldFocusActive={false}
     shouldFocusInitial={true}
     shouldLoop={true}
+    shouldPropagateKeyDown={false}
     tabType="vertical"
     trackActive={true}
     type={null}

diff --git a/react/src/lib/List/tests/index.spec.js b/react/src/lib/List/tests/index.spec.js
@@ -125,6 +125,63 @@ describe('tests for <List />', () => {
     expect(container.state().listContext.focus).toEqual('test-list-3');
   });
 
+  it('should handle keyPress event with <shouldPropagateKeyDown = true> props (Up/Down/Left/Right)', () => {
+    let count = 0;
+    const onKeyDown = () => count++;
+    const container = mount(
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      <div onKeyDown={onKeyDown}>
+        <List shouldPropagateKeyDown>
+          <ListItem className='firstIndex' label="test" id='test-list-1' />
+          <ListItem className='secondIndex' label="test" id='test-list-2' />
+          <ListItem className='thirdIndex' label="test" id='test-list-3' />
+        </List>
+      </div>
+    );
+
+    container.update();
+    container.update();
+
+    const anchor1 = container.find('.firstIndex').first();
+
+    expect(container.children().state().listContext.focus).toEqual('test-list-1');
+    anchor1.simulate('keydown', {keyCode: 40, which: 40, charCode: 40});
+    expect(container.children().state().listContext.focus).toEqual('test-list-2');
+    anchor1.simulate('keydown', {keyCode: 39, which: 39, charCode: 39});
+    expect(container.children().state().listContext.focus).toEqual('test-list-2');
+    anchor1.simulate('keydown', {keyCode: 38, which: 38, charCode: 38});
+    anchor1.simulate('keydown', {keyCode: 37, which: 37, charCode: 37});
+
+    expect(count).toEqual(4);
+  });
+
+  it('should handle keyPress event with <shouldPropagateKeyDown = false> props (Up/Down/Left/Right)', () => {
+    let count = 0;
+    const onKeyDown = () => count++;
+    const container = mount(
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      <div onKeyDown={onKeyDown}>
+        <List shouldPropagateKeyDown={false}>
+          <ListItem className='firstIndex' label="test" id='test-list-1' />
+          <ListItem className='secondIndex' label="test" id='test-list-2' />
+          <ListItem className='thirdIndex' label="test" id='test-list-3' />
+        </List>
+      </div>
+    );
+
+    container.update();
+    container.update();
+
+    const anchor1 = container.find('.firstIndex').first();
+
+    anchor1.simulate('keydown', {keyCode: 40, which: 40, charCode: 40});
+    anchor1.simulate('keydown', {keyCode: 39, which: 39, charCode: 39});
+    anchor1.simulate('keydown', {keyCode: 38, which: 38, charCode: 38});
+    anchor1.simulate('keydown', {keyCode: 37, which: 37, charCode: 37});
+
+    expect(count).toEqual(0);
+  });
+
   it('should handle keyPress event (PageUp/PageDown/Home/End)', () => {
     const container = mount(
       <List>

diff --git a/react/src/lib/SidebarNav/tests/__snapshots__/index.spec.js.snap b/react/src/lib/SidebarNav/tests/__snapshots__/index.spec.js.snap
@@ -54,6 +54,7 @@ ShallowWrapper {
             shouldFocusActive={false}
             shouldFocusInitial={true}
             shouldLoop={true}
+            shouldPropagateKeyDown={false}
             tabType="vertical"
             trackActive={true}
             type={null}
@@ -91,6 +92,7 @@ ShallowWrapper {
             shouldFocusActive={false}
             shouldFocusInitial={true}
             shouldLoop={true}
+            shouldPropagateKeyDown={false}
             tabType="vertical"
             trackActive={true}
             type={null}
@@ -129,6 +131,7 @@ ShallowWrapper {
               shouldFocusActive={false}
               shouldFocusInitial={true}
               shouldLoop={true}
+              shouldPropagateKeyDown={false}
               tabType="vertical"
               trackActive={true}
               type={null}
@@ -165,6 +168,7 @@ ShallowWrapper {
               "shouldFocusActive": false,
               "shouldFocusInitial": true,
               "shouldLoop": true,
+              "shouldPropagateKeyDown": false,
               "tabType": "vertical",
               "trackActive": true,
               "type": null,
@@ -234,6 +238,7 @@ ShallowWrapper {
               shouldFocusActive={false}
               shouldFocusInitial={true}
               shouldLoop={true}
+              shouldPropagateKeyDown={false}
               tabType="vertical"
               trackActive={true}
               type={null}
@@ -271,6 +276,7 @@ ShallowWrapper {
               shouldFocusActive={false}
               shouldFocusInitial={true}
               shouldLoop={true}
+              shouldPropagateKeyDown={false}
               tabType="vertical"
               trackActive={true}
               type={null}
@@ -309,6 +315,7 @@ ShallowWrapper {
                 shouldFocusActive={false}
                 shouldFocusInitial={true}
                 shouldLoop={true}
+                shouldPropagateKeyDown={false}
                 tabType="vertical"
                 trackActive={true}
                 type={null}
@@ -345,6 +352,7 @@ ShallowWrapper {
                 "shouldFocusActive": false,
                 "shouldFocusInitial": true,
                 "shouldLoop": true,
+                "shouldPropagateKeyDown": false,
                 "tabType": "vertical",
                 "trackActive": true,
                 "type": null,

diff --git a/react/src/lib/TopbarNav/tests/__snapshots__/index.spec.js.snap b/react/src/lib/TopbarNav/tests/__snapshots__/index.spec.js.snap
@@ -37,6 +37,7 @@ ShallowWrapper {
         shouldFocusActive={false}
         shouldFocusInitial={true}
         shouldLoop={true}
+        shouldPropagateKeyDown={false}
         tabType="horizontal"
         trackActive={true}
         type={null}
@@ -65,6 +66,7 @@ ShallowWrapper {
         "shouldFocusActive": false,
         "shouldFocusInitial": true,
         "shouldLoop": true,
+        "shouldPropagateKeyDown": false,
         "tabType": "horizontal",
         "trackActive": true,
         "type": null,
@@ -96,6 +98,7 @@ ShallowWrapper {
           shouldFocusActive={false}
           shouldFocusInitial={true}
           shouldLoop={true}
+          shouldPropagateKeyDown={false}
           tabType="horizontal"
           trackActive={true}
           type={null}
@@ -124,6 +127,7 @@ ShallowWrapper {
           "shouldFocusActive": false,
           "shouldFocusInitial": true,
           "shouldLoop": true,
+          "shouldPropagateKeyDown": false,
           "tabType": "horizontal",
           "trackActive": true,
           "type": null,