fix hover trigger not working when multi-trigger is used

mohsinulhaq · mohsinulhaq · commit de9825298638 · 2019-11-28T22:33:17.000+05:30
fix typing issues after react-popper upgrade
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -4,25 +4,23 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'prettier/@typescript-eslint',
     'plugin:prettier/recommended',
-    'plugin:react/recommended',
-    'plugin:jsx-a11y/recommended'
+    'plugin:react/recommended'
   ],
   parserOptions: {
-    ecmaVersion: 2018,
+    ecmaVersion: 2020,
     sourceType: 'module',
     ecmaFeatures: {
       jsx: true
     }
   },
-  plugins: ['@typescript-eslint', 'react', 'jsx-a11y'],
+  plugins: ['@typescript-eslint', 'react'],
   settings: {
     react: {
       version: 'detect'
     }
   },
   rules: {
-    '@typescript-eslint/explicit-function-return-type': 0,
-    '@typescript-eslint/no-non-null-assertion': 0,
-    'react/no-find-dom-node': 0
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off'
   }
 };
diff --git a/.size-snapshot.json b/.size-snapshot.json
@@ -1,20 +1,20 @@
 {
   "dist/cjs/react-popper-tooltip.js": {
-    "bundled": 14884,
-    "minified": 8278,
-    "gzipped": 2420
+    "bundled": 15217,
+    "minified": 8547,
+    "gzipped": 2448
   },
   "dist/esm/react-popper-tooltip.js": {
-    "bundled": 14846,
-    "minified": 8260,
-    "gzipped": 2416,
+    "bundled": 15179,
+    "minified": 8529,
+    "gzipped": 2444,
     "treeshaked": {
       "rollup": {
         "code": 236,
         "import_statements": 216
       },
       "webpack": {
-        "code": 8937
+        "code": 9196
       }
     }
   }
diff --git a/docs/examples/BasicTooltipTrigger.tsx b/docs/examples/BasicTooltipTrigger.tsx
@@ -51,4 +51,6 @@ const BasicTooltipTrigger = memo(
   )
 );
 
+BasicTooltipTrigger.displayName = 'BasicTooltipTrigger';
+
 export default BasicTooltipTrigger;
diff --git a/doczrc.js b/doczrc.js
@@ -1,9 +1,5 @@
-import {css} from 'docz-plugin-css';
-
 export default {
   title: 'react-popper-tooltip',
   description: 'Documentation for react-popper-tooltip',
-  typescript: true,
-  codeSandbox: false,
-  plugins: [css()]
+  typescript: true
 };
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-popper-tooltip",
-  "version": "2.10.0",
+  "version": "2.10.1",
   "description": "React tooltip library built around react-popper",
   "homepage": "https://react-popper-tooltip.netlify.com",
   "repository": {
@@ -55,42 +55,38 @@
     "react-dom": "^16.6.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.6.3",
-    "react-popper": "^1.3.4"
+    "@babel/runtime": "^7.7.4",
+    "react-popper": "^1.3.6"
   },
   "devDependencies": {
-    "@babel/cli": "^7.6.4",
-    "@babel/core": "^7.6.4",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-transform-runtime": "^7.6.2",
-    "@babel/preset-env": "^7.6.3",
-    "@babel/preset-react": "^7.6.3",
-    "@babel/preset-typescript": "^7.6.0",
-    "@testing-library/react": "^9.3.0",
-    "@types/jest": "^24.0.20",
-    "@types/react": "^16.9.11",
-    "@types/react-dom": "^16.9.3",
-    "@typescript-eslint/eslint-plugin": "^2.5.0",
-    "@typescript-eslint/parser": "^2.5.0",
-    "docz": "^1.3.2",
-    "docz-plugin-css": "^0.11.0",
-    "docz-theme-default": "^1.2.0",
-    "eslint": "^6.6.0",
-    "eslint-config-prettier": "^6.4.0",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "@babel/cli": "^7.7.4",
+    "@babel/core": "^7.7.4",
+    "@babel/plugin-proposal-class-properties": "^7.7.4",
+    "@babel/plugin-transform-runtime": "^7.7.4",
+    "@babel/preset-env": "^7.7.4",
+    "@babel/preset-react": "^7.7.4",
+    "@babel/preset-typescript": "^7.7.4",
+    "@testing-library/react": "^9.3.2",
+    "@types/jest": "^24.0.23",
+    "@types/react": "^16.9.13",
+    "@types/react-dom": "^16.9.4",
+    "@typescript-eslint/eslint-plugin": "^2.9.0",
+    "@typescript-eslint/parser": "^2.9.0",
+    "docz": "^2.1.1",
+    "eslint": "^6.7.1",
+    "eslint-config-prettier": "^6.7.0",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-react": "^7.16.0",
-    "husky": "^3.0.9",
+    "husky": "^3.1.0",
     "jest": "^24.9.0",
-    "lint-staged": "^9.4.2",
-    "prettier": "^1.18.2",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
-    "react-hot-loader": "^4.12.15",
-    "rollup": "^1.25.2",
+    "lint-staged": "^9.5.0",
+    "prettier": "^1.19.1",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "rollup": "^1.27.5",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-size-snapshot": "^0.10.0",
-    "typescript": "^3.6.4"
+    "typescript": "^3.7.2"
   }
 }
diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx
@@ -1,6 +1,11 @@
 import React, {Component} from 'react';
-import {GetArrowPropsArg, GetTooltipPropsArg, TooltipProps} from './types';
-import {callAll, TooltipContext} from './utils';
+import {
+  GetArrowPropsArg,
+  GetTooltipPropsArg,
+  TooltipProps,
+  TriggerTypes
+} from './types';
+import {callAll, TooltipContext, setRef} from './utils';
 
 const MUTATION_OBSERVER_CONFIG: MutationObserverInit = {
   childList: true,
@@ -14,13 +19,16 @@ class Tooltip extends Component<TooltipProps> {
   private tooltipRef!: HTMLElement | null;
 
   public componentDidMount() {
-    const {trigger} = this.props;
     const observer = (this.observer = new MutationObserver(() => {
       this.props.scheduleUpdate();
     }));
     observer.observe(this.tooltipRef!, MUTATION_OBSERVER_CONFIG);
 
-    if (trigger !== 'none' && trigger !== 'focus') {
+    if (
+      this.isTriggeredBy('hover') ||
+      this.isTriggeredBy('click') ||
+      this.isTriggeredBy('right-click')
+    ) {
       const {
         removeParentOutsideClickHandler,
         removeParentOutsideRightClickHandler
@@ -43,12 +51,15 @@ class Tooltip extends Component<TooltipProps> {
   }
 
   public componentWillUnmount() {
-    const {trigger} = this.props;
     if (this.observer) {
       this.observer.disconnect();
     }
 
-    if (trigger !== 'none' && trigger !== 'focus') {
+    if (
+      this.isTriggeredBy('hover') ||
+      this.isTriggeredBy('click') ||
+      this.isTriggeredBy('right-click')
+    ) {
       const {
         isParentNoneTriggered,
         addParentOutsideClickHandler,
@@ -83,6 +94,13 @@ class Tooltip extends Component<TooltipProps> {
     );
   }
 
+  private isTriggeredBy(event: TriggerTypes) {
+    const {trigger} = this.props;
+    return (
+      trigger === event || (Array.isArray(trigger) && trigger.includes(event))
+    );
+  }
+
   private handleOutsideClick?: EventListener = event => {
     if (this.tooltipRef && !this.tooltipRef.contains(event.target as Node)) {
       const {parentOutsideClickHandler} = this.context;
@@ -131,28 +149,24 @@ class Tooltip extends Component<TooltipProps> {
       this.handleOutsideRightClick!
     );
 
-  private getTooltipRef = (ref: HTMLElement | null) => {
-    this.tooltipRef = ref;
-    this.props.innerRef(ref);
+  private getTooltipRef = (node: HTMLElement | null) => {
+    this.tooltipRef = node;
+    setRef(this.props.innerRef, node);
   };
 
   private getArrowProps = (props: GetArrowPropsArg = {}) => ({
     ...props,
     style: {...props.style, ...this.props.arrowProps.style}
   });
 
-  private getTooltipProps = (props: GetTooltipPropsArg = {}) => {
-    const isHoverTriggered = this.props.trigger === 'hover';
-
-    return {
-      ...props,
-      ...(isHoverTriggered && {
-        onMouseEnter: callAll(this.props.clearScheduled, props.onMouseEnter),
-        onMouseLeave: callAll(this.props.hideTooltip, props.onMouseLeave)
-      }),
-      style: {...props.style, ...this.props.style}
-    };
-  };
+  private getTooltipProps = (props: GetTooltipPropsArg = {}) => ({
+    ...props,
+    ...(this.isTriggeredBy('hover') && {
+      onMouseEnter: callAll(this.props.clearScheduled, props.onMouseEnter),
+      onMouseLeave: callAll(this.props.hideTooltip, props.onMouseLeave)
+    }),
+    style: {...props.style, ...this.props.style}
+  });
 
   private contextValue = {
     isParentNoneTriggered: this.props.trigger === 'none',
diff --git a/src/types.ts b/src/types.ts
@@ -4,6 +4,10 @@ import ReactPopper from 'react-popper';
 
 export type TriggerTypes = 'none' | 'click' | 'right-click' | 'hover' | 'focus';
 export type Trigger = TriggerTypes | TriggerTypes[];
+export type Ref =
+  | ((element: HTMLElement | null) => void)
+  | {current: HTMLElement | null}
+  | null;
 
 export interface GetTriggerPropsArg {
   onTouchEnd?(event: React.SyntheticEvent): void;
@@ -33,13 +37,13 @@ export interface GetArrowPropsArg {
 }
 
 export interface ChildrenArg {
-  triggerRef: ReactPopper.RefHandler;
+  triggerRef: Ref;
   getTriggerProps(arg?: GetTriggerPropsArg): GetTriggerPropsArg;
 }
 
 export interface TooltipArg {
-  arrowRef: ReactPopper.RefHandler;
-  tooltipRef: ReactPopper.RefHandler;
+  arrowRef: Ref;
+  tooltipRef: Ref;
   placement: PopperJS.Placement;
   getArrowProps(arg?: GetArrowPropsArg): GetArrowPropsArg;
   getTooltipProps(arg?: GetTooltipPropsArg): GetTooltipPropsArg;
@@ -74,11 +78,11 @@ export interface TooltipTriggerProps {
   /**
    * Function that can be used to obtain a tooltip element reference
    */
-  getTooltipRef?: ReactPopper.RefHandler;
+  getTooltipRef?: Ref;
   /**
    * Function that can be used to obtain a trigger element reference
    */
-  getTriggerRef?: ReactPopper.RefHandler;
+  getTriggerRef?: Ref;
   /**
    * Modifiers passed directly to the underlying popper.js instance
    * For more information, refer to Popper.js’ modifier docs:
@@ -133,7 +137,7 @@ export interface TooltipTriggerState {
 export interface TooltipProps {
   arrowProps: ReactPopper.PopperArrowProps;
   closeOnOutOfBoundaries: boolean;
-  innerRef: ReactPopper.RefHandler;
+  innerRef: Ref;
   outOfBoundaries: boolean | null;
   placement: PopperJS.Placement;
   style: React.CSSProperties;
diff --git a/src/utils.ts b/src/utils.ts
@@ -1,4 +1,5 @@
 import React from 'react';
+import {Ref} from './types';
 
 export const TooltipContext = React.createContext({});
 
@@ -18,3 +19,11 @@ export const canUseDOM = () =>
     window.document &&
     window.document.createElement
   );
+
+export const setRef = (ref: Ref, node: HTMLElement | null) => {
+  if (typeof ref === 'function') {
+    return ref(node);
+  } else if (ref != null) {
+    ref.current = node;
+  }
+};
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -51,4 +51,6 @@ const BasicTooltipTrigger = memo(`
`51`	`51`	`)`
`52`	`52`	`);`
`53`	`53`
	`54`	`+BasicTooltipTrigger.displayName = 'BasicTooltipTrigger';`
	`55`	`+`
`54`	`56`	`export default BasicTooltipTrigger;`