ResourceList onClick is called three times on keypress of Enter

UNRELEASED.md

@@ -22,6 +22,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Bug fixes
 
+- Fixed onClick from firing three times when using the enter key on a `ResourceList` item ([#1188](https://github.com/Shopify/polaris-react/pull/1188))
 - Resolve console `[Intervention]` errors for touch interactions on `ColorPicker`, along with preventing page scrolling while interacting with the color slider ([#1414](https://github.com/Shopify/polaris-react/pull/1414))
 - Applied `font-family` to `button` elements which were being overridden by User Agent Stylesheet ([#1397](https://github.com/Shopify/polaris-react/pull/1397))
 - Allowed `Tooltip` content to wrap no nonbreaking strings [#1395](https://github.com/Shopify/polaris-react/pull/1395)

src/components/ResourceList/components/Item/Item.tsx

@@ -287,7 +287,7 @@ export class Item extends React.Component<CombinedProps, State> {
         onClick={this.handleClick}
         onFocus={this.handleFocus}
         onBlur={this.handleBlur}
-        onKeyUp={this.handleKeypress}
+        onKeyUp={this.handleKeyUp}
         testID="Item-Wrapper"
         data-href={url}
       >
@@ -342,6 +342,7 @@ export class Item extends React.Component<CombinedProps, State> {
   };
 
   private handleClick = (event: React.MouseEvent<any>) => {
+    stopPropagation(event);
     const {
       id,
       onClick,
@@ -374,14 +375,15 @@ export class Item extends React.Component<CombinedProps, State> {
     }
   };
 
-  private handleKeypress = (event: React.KeyboardEvent<HTMLElement>) => {
+  // This fires onClick when there is a URL on the item
+  private handleKeyUp = (event: React.KeyboardEvent<HTMLElement>) => {
     const {
       onClick = noop,
       context: {selectMode},
     } = this.props;
     const {key} = event;
 
-    if (key === 'Enter' && !selectMode) {
+    if (key === 'Enter' && this.props.url && !selectMode) {
       onClick();
     }
   };

src/components/ResourceList/components/Item/tests/Item.test.tsx

@@ -190,18 +190,69 @@ describe('<Item />', () => {
         </Provider>,
       );
       const item = findByTestID(wrapper, 'Item-Wrapper');
-      trigger(item, 'onClick', {nativeEvent: {metaKey: true}});
+      trigger(item, 'onClick', {
+        stopPropagation: () => {},
+        nativeEvent: {metaKey: true},
+      });
       expect(spy).toHaveBeenCalledWith(url, '_blank');
     });
 
+    it('calls onClick when hitting keyUp on the item when onClick and URL exists', () => {
+      const onClick = jest.fn();
+      const wrapper = mountWithAppProvider(
+        <Provider value={mockDefaultContext}>
+          <Item id={itemId} url="#" onClick={onClick} />
+        </Provider>,
+      );
+
+      findByTestID(wrapper, 'Item-Wrapper').simulate('keyup', {
+        key: 'Enter',
+      });
+
+      expect(onClick).toHaveBeenCalled();
+    });
+
+    it('does not call onClick when hitting keyUp on non Enter key', () => {
+      const onClick = jest.fn();
+      const wrapper = mountWithAppProvider(
+        <Provider value={mockDefaultContext}>
+          <Item id={itemId} url="#" onClick={onClick} />
+        </Provider>,
+      );
+
+      findByTestID(wrapper, 'Item-Wrapper').simulate('keyup', {
+        key: 'Tab',
+      });
+
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it('does not call onClick when hitting keyUp on the item when no URL exists', () => {
+      const onClick = jest.fn();
+      const wrapper = mountWithAppProvider(
+        <Provider value={mockSelectModeContext}>
+          <Item id={itemId} onClick={onClick} />
+        </Provider>,
+      );
+
+      findByTestID(wrapper, 'Item-Wrapper').simulate('keyup', {
+        key: 'Enter',
+      });
+
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
     it('calls window.open on ctrlKey + click', () => {
       const wrapper = mountWithAppProvider(
         <Provider value={mockDefaultContext}>
           <Item id={itemId} url={url} accessibilityLabel={ariaLabel} />
         </Provider>,
       );
       const item = findByTestID(wrapper, 'Item-Wrapper');
-      trigger(item, 'onClick', {nativeEvent: {ctrlKey: true}});
+      trigger(item, 'onClick', {
+        stopPropagation: () => {},
+        nativeEvent: {ctrlKey: true},
+      });
       expect(spy).toHaveBeenCalledWith(url, '_blank');
     });
   });