fix click/touch trigger for hybrid devices

Author: mohsinulhaq

.gitignore

@@ -6,6 +6,7 @@
 npm-debug.log
 yarn-error.log
 .idea/
+.vscode/
 node_modules/
 dist/
 .docz/

.size-snapshot.json

@@ -1,20 +1,20 @@
 {
   "dist/cjs/react-popper-tooltip.js": {
-    "bundled": 14683,
-    "minified": 7887,
-    "gzipped": 2209
+    "bundled": 14562,
+    "minified": 7842,
+    "gzipped": 2194
   },
   "dist/esm/react-popper-tooltip.js": {
-    "bundled": 14631,
-    "minified": 7854,
-    "gzipped": 2204,
+    "bundled": 14510,
+    "minified": 7809,
+    "gzipped": 2190,
     "treeshaked": {
       "rollup": {
-        "code": 7279,
+        "code": 7284,
         "import_statements": 331
       },
       "webpack": {
-        "code": 8513
+        "code": 8518
       }
     }
   }

package.json

@@ -43,44 +43,44 @@
   "author": "Mohsin Ul Haq <[email protected]>",
   "license": "MIT",
   "peerDependencies": {
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0"
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.3.1",
-    "react-popper": "^1.3.2"
+    "react-popper": "^1.3.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.2.2",
-    "@babel/plugin-proposal-class-properties": "^7.3.0",
+    "@babel/core": "^7.3.3",
+    "@babel/plugin-proposal-class-properties": "^7.3.3",
     "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/preset-env": "^7.3.1",
     "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.1.0",
-    "@types/jest": "^23.3.13",
-    "@types/react": "^16.7.20",
-    "@types/react-dom": "^16.0.11",
+    "@babel/preset-typescript": "^7.3.3",
+    "@types/jest": "^24.0.6",
+    "@types/react": "^16.8.4",
+    "@types/react-dom": "^16.8.2",
     "docz": "^0.13.7",
     "docz-plugin-css": "^0.11.0",
     "docz-theme-default": "^0.13.7",
     "gh-pages": "^2.0.1",
-    "jest": "^24.0.0",
+    "jest": "^24.1.0",
     "pre-commit": "^1.2.2",
-    "prettier": "^1.16.1",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-testing-library": "^5.4.4",
+    "prettier": "^1.16.4",
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3",
+    "react-testing-library": "^5.9.0",
     "rimraf": "^2.6.3",
-    "rollup": "^1.1.2",
+    "rollup": "^1.2.2",
     "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-node-resolve": "^4.0.0",
+    "rollup-plugin-node-resolve": "^4.0.1",
     "rollup-plugin-size-snapshot": "^0.8.0",
     "tslint": "^5.12.1",
-    "tslint-config-prettier": "^1.17.0",
+    "tslint-config-prettier": "^1.18.0",
     "tslint-eslint-rules": "^5.4.0",
     "tslint-plugin-prettier": "^2.0.1",
     "tslint-react": "^3.6.0",
-    "typescript": "^3.2.4"
+    "typescript": "^3.3.3333"
   }
 }

src/Tooltip.tsx

@@ -91,6 +91,8 @@ class Tooltip extends Component<ITooltipProps> {
   }
 
   private handleOutsideClick?: EventListener = event => {
+    event.stopPropagation();
+    event.preventDefault();
     if (!findDOMNode(this)!.contains(event.target as Node)) {
       const {
         hideTooltip,
@@ -123,11 +125,8 @@ class Tooltip extends Component<ITooltipProps> {
   };
 
   private addOutsideClickHandler = () => {
-    if ('ontouchend' in window) {
-      document.addEventListener('touchend', this.handleOutsideClick!);
-    } else {
-      document.addEventListener('click', this.handleOutsideClick!);
-    }
+    document.addEventListener('touchend', this.handleOutsideClick!);
+    document.addEventListener('click', this.handleOutsideClick!);
   };
 
   private removeOutsideClickHandler = () => {

src/TooltipTrigger.tsx

@@ -184,7 +184,10 @@ class TooltipTrigger extends Component<
     this[action]({pageX, pageY});
   };
 
-  private clickToggle: React.MouseEventHandler = ({pageX, pageY}) => {
+  private clickToggle: React.MouseEventHandler = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    event.preventDefault();
+    const {pageX, pageY} = event;
     const action = this.props.followCursor ? 'showTooltip' : 'toggleTooltip';
     this[action]({pageX, pageY});
   };
@@ -201,18 +204,13 @@ class TooltipTrigger extends Component<
     const isClickTriggered = trigger === 'click';
     const isHoverTriggered = trigger === 'hover';
     const isRightClickTriggered = trigger === 'right-click';
-    const isTouchEnabled = canUseDOM() && 'ontouchend' in window;
 
     return {
       ...props,
-      ...(isClickTriggered &&
-        isTouchEnabled && {
-          onTouchEnd: callAll(this.clickToggle, props.onTouchEnd)
-        }),
-      ...(isClickTriggered &&
-        !isTouchEnabled && {
-          onClick: callAll(this.clickToggle, props.onClick)
-        }),
+      ...(isClickTriggered && {
+        onClick: callAll(this.clickToggle, props.onClick),
+        onTouchEnd: callAll(this.clickToggle, props.onTouchEnd)
+      }),
       ...(isRightClickTriggered && {
         onContextMenu: callAll(this.contextMenuToggle, props.onContextMenu)
       }),

tsconfig.json

@@ -1,9 +1,13 @@
 {
   "compilerOptions": {
     /* Basic Options */
-    "target": "esnext",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
     "module": "esnext",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
-    // "lib": [],                             /* Specify library files to be included in the compilation. */
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],                             /* Specify library files to be included in the compilation. */
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
     "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */