Merge pull request #176 from iCHEF/bugfix/closable_trigger

Improve 'closable()' mixin triggering
iCHEF · Oct 3, 2018 · f5d6f1a · f5d6f1a
2 parents 63f0908 + 798703e
commit f5d6f1a
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,7 +5,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
-N/A
+### Changed
+- [Core] `closable()` mixin is now triggered on `touchend` events on touch devices. (#176)
+- [Storybook] Update examples for `<Popover>` to add a row of hyperlink `<Button>`. (#176)
 
 ## [1.9.0]
 ### Added

diff --git a/packages/core/src/mixins/__tests__/closable.test.js b/packages/core/src/mixins/__tests__/closable.test.js
@@ -96,7 +96,7 @@ it('triggers onClose() call on click/touch outside after a delay if turned on',
     expect(handleClose).toHaveBeenCalledTimes(1);
 
     // jsdom doesn't support constructing TouchEvent yet.
-    event = new CustomEvent('touchstart');
+    event = new CustomEvent('touchend');
     document.dispatchEvent(event);
 
     jest.runOnlyPendingTimers();
@@ -137,7 +137,7 @@ it('triggers onClose() call on click/touch inside a delay if turned on', () => {
     expect(handleClose).toHaveBeenCalledTimes(1);
 
     // jsdom doesn't support constructing TouchEvent yet.
-    event = new CustomEvent('touchstart');
+    event = new CustomEvent('touchend');
     wrapper.instance().nodeRef.dispatchEvent(event);
 
     jest.runOnlyPendingTimers();

diff --git a/packages/core/src/mixins/closable.js b/packages/core/src/mixins/closable.js
@@ -53,13 +53,13 @@ const closable = ({
         componentDidMount() {
             document.addEventListener('keyup', this.handleDocumentKeyup);
             document.addEventListener('click', this.handleDocumentClickOrTouch);
-            document.addEventListener('touchstart', this.handleDocumentClickOrTouch);
+            document.addEventListener('touchend', this.handleDocumentClickOrTouch);
         }
 
         componentWillUnmount() {
             document.removeEventListener('keyup', this.handleDocumentKeyup);
             document.removeEventListener('click', this.handleDocumentClickOrTouch);
-            document.removeEventListener('touchstart', this.handleDocumentClickOrTouch);
+            document.removeEventListener('touchend', this.handleDocumentClickOrTouch);
             clearTimeout(this.state.closeDelayTimeout);
         }
 
@@ -92,7 +92,7 @@ const closable = ({
         captureInsideEvents = (node) => {
             if (node) {
                 node.addEventListener('click', this.handleInsideClickOrTouch);
-                node.addEventListener('touchstart', this.handleInsideClickOrTouch);
+                node.addEventListener('touchend', this.handleInsideClickOrTouch);
             }
             this.nodeRef = node;
         }

diff --git a/packages/storybook/examples/Popover/DemoList.js b/packages/storybook/examples/Popover/DemoList.js
@@ -5,28 +5,24 @@ import Button from '@ichef/gypcrete/src/Button';
 import List from '@ichef/gypcrete/src/List';
 import ListRow from '@ichef/gypcrete/src/ListRow';
 
-function DemoButton(props) {
+function ButtonRow(props) {
     return (
-        <Button
-            bold
-            minified={false}
-            color="black"
-            {...props} />
+        <ListRow>
+            <Button
+                minified={false}
+                {...props} />
+        </ListRow>
     );
 }
 
 function DemoList() {
     return (
         <List>
-            <ListRow>
-                <DemoButton basic="Row 1" onClick={action('click.1')} />
-            </ListRow>
-            <ListRow>
-                <DemoButton basic="Row 2" onClick={action('click.2')} />
-            </ListRow>
-            <ListRow>
-                <DemoButton basic="Row 3" onClick={action('click.3')} />
-            </ListRow>
+            <ButtonRow basic="Row 1" onClick={action('click.1')} />
+            <ButtonRow basic="Row 2" onClick={action('click.2')} />
+            <ButtonRow basic="Row 3" onClick={action('click.3')} />
+
+            <ButtonRow basic="Link row" tagName="a" href="https://apple.com" />
         </List>
     );
 }