Refactor tooltip

src/components/Hoverable/hoverablePropTypes.js

@@ -19,17 +19,13 @@ const propTypes = {
 
     /** Function that executes when the mouse leaves the children. */
     onHoverOut: PropTypes.func,
-
-    // If the mouse clicks outside, should we dismiss hover?
-    resetsOnClickOutside: PropTypes.bool,
 };
 
 const defaultProps = {
     absolute: false,
     containerStyles: [],
     onHoverIn: () => {},
     onHoverOut: () => {},
-    resetsOnClickOutside: false,
 };
 
 export {

src/components/Hoverable/index.js

@@ -72,10 +72,6 @@ class Hoverable extends Component {
         if (!this.state.isHovered) {
             return;
         }
-        if (this.props.resetsOnClickOutside) {
-            this.setIsHovered(false);
-            return;
-        }
         if (this.wrapperView && !this.wrapperView.contains(event.target)) {
             this.setIsHovered(false);
         }
@@ -93,8 +89,24 @@ class Hoverable extends Component {
                         ref(el);
                     }
                 },
-                onMouseEnter: () => this.setIsHovered(true),
-                onMouseLeave: () => this.setIsHovered(false),
+                onMouseEnter: (el) => {
+                    this.setIsHovered(true);
+
+                    // Call the original onMouseEnter, if any
+                    const {onMouseEnter} = this.props.children;
+                    if (_.isFunction(onMouseEnter)) {
+                        onMouseEnter(el);
+                    }
+                },
+                onMouseLeave: (el) => {
+                    this.setIsHovered(false);
+
+                    // Call the original onMouseLeave, if any
+                    const {onMouseLeave} = this.props.children;
+                    if (_.isFunction(onMouseLeave)) {
+                        onMouseLeave(el);
+                    }
+                },
             });
         }
         return (

src/components/Modal/BaseModal.js

@@ -8,6 +8,7 @@ import * as StyleUtils from '../../styles/StyleUtils';
 import themeColors from '../../styles/themes/default';
 import {propTypes as modalPropTypes, defaultProps as modalDefaultProps} from './modalPropTypes';
 import * as Modal from '../../libs/actions/Modal';
+import DomUtils from '../../libs/DomUtils';
 import getModalStyles from '../../styles/getModalStyles';
 import variables from '../../styles/variables';
 
@@ -90,6 +91,7 @@ class BaseModal extends PureComponent {
                 // Note: Escape key on web/desktop will trigger onBackButtonPress callback
                 // eslint-disable-next-line react/jsx-props-no-multi-spaces
                 onBackButtonPress={this.props.onClose}
+                onModalWillShow={DomUtils.blurActiveElement}
                 onModalShow={() => {
                     if (this.props.shouldSetModalVisibility) {
                         Modal.setModalVisibility(true);

src/components/Tooltip/index.js

@@ -7,6 +7,7 @@ import withWindowDimensions from '../withWindowDimensions';
 import {propTypes, defaultProps} from './tooltipPropTypes';
 import TooltipSense from './TooltipSense';
 import makeCancellablePromise from '../../libs/MakeCancellablePromise';
+import * as Browser from '../../libs/Browser';
 
 class Tooltip extends PureComponent {
     constructor(props) {
@@ -63,7 +64,7 @@ class Tooltip extends PureComponent {
     getWrapperPosition() {
         return new Promise(((resolve) => {
             // Make sure the wrapper is mounted before attempting to measure it.
-            if (this.wrapperView) {
+            if (this.wrapperView && _.isFunction(this.wrapperView.measureInWindow)) {
                 this.wrapperView.measureInWindow((x, y, width, height) => resolve({
                     x, y, width, height,
                 }));
@@ -79,6 +80,12 @@ class Tooltip extends PureComponent {
      * Display the tooltip in an animation.
      */
     showTooltip() {
+        // On mWeb we do not show Tooltips as there are no way to hide them besides blurring.
+        // That's due to that fact that on mWeb there is no MouseLeave events.
+        if (Browser.isMobile()) {
+            return;
+        }
+
         if (!this.state.isRendered) {
             this.setState({isRendered: true});
         }
@@ -148,6 +155,9 @@ class Tooltip extends PureComponent {
             <View
                 ref={el => this.wrapperView = el}
                 style={this.props.containerStyles}
+                onFocus={this.showTooltip}
+                onBlur={this.hideTooltip}
+                focusable
             >
                 {this.props.children}
             </View>
@@ -156,15 +166,33 @@ class Tooltip extends PureComponent {
         if (this.props.absolute && React.isValidElement(this.props.children)) {
             child = React.cloneElement(React.Children.only(this.props.children), {
                 ref: (el) => {
-                    // Keep your own reference
                     this.wrapperView = el;
 
                     // Call the original ref, if any
                     const {ref} = this.props.children;
-                    if (typeof ref === 'function') {
+                    if (_.isFunction(ref)) {
                         ref(el);
                     }
                 },
+                onFocus: (el) => {
+                    this.showTooltip();
+
+                    // Call the original onFocus, if any
+                    const {onFocus} = this.props.children;
+                    if (_.isFunction(onFocus)) {
+                        onFocus(el);
+                    }
+                },
+                onBlur: (el) => {
+                    this.hideTooltip();
+
+                    // Call the original onBlur, if any
+                    const {onBlur} = this.props.children;
+                    if (_.isFunction(onBlur)) {
+                        onBlur(el);
+                    }
+                },
+                focusable: true,
             });
         }
         return (
@@ -189,7 +217,6 @@ class Tooltip extends PureComponent {
                     containerStyles={this.props.containerStyles}
                     onHoverIn={this.showTooltip}
                     onHoverOut={this.hideTooltip}
-                    resetsOnClickOutside
                 >
                     {child}
                 </Hoverable>

src/libs/DomUtils/index.js

@@ -0,0 +1,7 @@
+function blurActiveElement() {
+    document.activeElement.blur();
+}
+
+export default {
+    blurActiveElement,
+};

src/libs/DomUtils/index.native.js

@@ -0,0 +1,5 @@
+function blurActiveElement() {}
+
+export default {
+    blurActiveElement,
+};

src/libs/Navigation/NavigationRoot.js

@@ -8,6 +8,7 @@ import AppNavigator from './AppNavigator';
 import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator';
 import themeColors from '../../styles/themes/default';
 import styles from '../../styles/styles';
+import DomUtils from '../DomUtils';
 import Log from '../Log';
 
 // https://reactnavigation.org/docs/themes
@@ -45,6 +46,12 @@ function parseAndLogRoute(state) {
         Log.info('Navigating to route', false, {path: currentPath});
     }
 
+    // Clicking a button that does navigation will stay active even if it's out of view
+    // and it's tooltip will stay visible.
+    // We blur the element manually to fix that (especially for Safari).
+    // More info: https://github.com/Expensify/App/issues/13146
+    DomUtils.blurActiveElement();
+
     Navigation.setIsNavigationReady();
 }