refactor tooltip to fix double focusable component

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js

@@ -60,10 +60,7 @@ const BaseAnchorForCommentsOnly = (props) => {
             onPressIn={props.onPressIn}
             onPressOut={props.onPressOut}
         >
-            <Tooltip
-                containerStyles={[styles.dInline]}
-                text={props.href}
-            >
+            <Tooltip text={props.href}>
                 <Text
                     ref={(el) => (linkRef = el)}
                     style={StyleSheet.flatten([props.style, defaultTextStyle])}

src/components/AttachmentCarousel/index.js

@@ -296,8 +296,8 @@ class AttachmentCarousel extends React.Component {
                 {this.state.shouldShowArrow && (
                     <>
                         {!isBackDisabled && (
-                            <View style={[styles.attachmentArrow, this.props.isSmallScreenWidth ? styles.l2 : styles.l8]}>
-                                <Tooltip text={this.props.translate('common.previous')}>
+                            <Tooltip text={this.props.translate('common.previous')}>
+                                <View style={[styles.attachmentArrow, this.props.isSmallScreenWidth ? styles.l2 : styles.l8]}>
                                     <Button
                                         small
                                         innerStyles={[styles.arrowIcon]}
@@ -311,12 +311,12 @@ class AttachmentCarousel extends React.Component {
                                         onPressIn={this.cancelAutoHideArrow}
                                         onPressOut={this.autoHideArrow}
                                     />
-                                </Tooltip>
-                            </View>
+                                </View>
+                            </Tooltip>
                         )}
                         {!isForwardDisabled && (
-                            <View style={[styles.attachmentArrow, this.props.isSmallScreenWidth ? styles.r2 : styles.r8]}>
-                                <Tooltip text={this.props.translate('common.next')}>
+                            <Tooltip text={this.props.translate('common.next')}>
+                                <View style={[styles.attachmentArrow, this.props.isSmallScreenWidth ? styles.r2 : styles.r8]}>
                                     <Button
                                         small
                                         innerStyles={[styles.arrowIcon]}
@@ -330,8 +330,8 @@ class AttachmentCarousel extends React.Component {
                                         onPressIn={this.cancelAutoHideArrow}
                                         onPressOut={this.autoHideArrow}
                                     />
-                                </Tooltip>
-                            </View>
+                                </View>
+                            </Tooltip>
                         )}
                     </>
                 )}

src/components/AttachmentView.js

@@ -136,11 +136,11 @@ const AttachmentView = (props) => {
 
             <Text style={[styles.textStrong, styles.flexShrink1, styles.breakAll, styles.flexWrap, styles.mw100]}>{props.file && props.file.name}</Text>
             {!props.shouldShowLoadingSpinnerIcon && props.shouldShowDownloadIcon && (
-                <View style={styles.ml2}>
-                    <Tooltip text={props.translate('common.download')}>
+                <Tooltip text={props.translate('common.download')}>
+                    <View style={styles.ml2}>
                         <Icon src={Expensicons.Download} />
-                    </Tooltip>
-                </View>
+                    </View>
+                </Tooltip>
             )}
             {props.shouldShowLoadingSpinnerIcon && (
                 <View style={styles.ml2}>

src/components/AvatarCropModal/AvatarCropModal.js

@@ -410,13 +410,15 @@ const AvatarCropModal = (props) => {
                                 text={props.translate('common.rotate')}
                                 shiftVertical={-2}
                             >
-                                <Button
-                                    medium
-                                    icon={Expensicons.Rotate}
-                                    iconFill={themeColors.inverse}
-                                    iconStyles={[styles.mr0]}
-                                    onPress={rotateImage}
-                                />
+                                <View>
+                                    <Button
+                                        medium
+                                        icon={Expensicons.Rotate}
+                                        iconFill={themeColors.inverse}
+                                        iconStyles={[styles.mr0]}
+                                        onPress={rotateImage}
+                                    />
+                                </View>
                             </Tooltip>
                         </View>
                     </>

src/components/AvatarCropModal/Slider.js

@@ -49,10 +49,7 @@ const Slider = (props) => {
             >
                 <Animated.View style={[styles.sliderKnob, rSliderStyle]}>
                     {tooltipIsVisible && (
-                        <Tooltip
-                            text={props.translate('common.zoom')}
-                            shiftVertical={-2}
-                        >
+                        <Tooltip text={props.translate('common.zoom')}>
                             <View style={[styles.sliderKnobTooltipView]} />
                         </Tooltip>
                     )}

src/components/AvatarWithImagePicker.js

@@ -259,26 +259,25 @@ class AvatarWithImagePicker extends React.Component {
                 <Pressable onPress={() => this.setState({isMenuVisible: true})}>
                     <View style={[styles.pRelative, styles.avatarLarge]}>
                         <Tooltip text={this.props.translate('avatarWithImagePicker.editImage')}>
-                            {this.props.source ? (
-                                <Avatar
-                                    containerStyles={styles.avatarLarge}
-                                    imageStyles={[styles.avatarLarge, styles.alignSelfCenter]}
-                                    source={this.props.source}
-                                    fallbackIcon={this.props.fallbackIcon}
-                                    size={this.props.size}
-                                    type={this.props.type}
-                                />
-                            ) : (
-                                <DefaultAvatar />
-                            )}
+                            <View>
+                                {this.props.source ? (
+                                    <Avatar
+                                        containerStyles={styles.avatarLarge}
+                                        imageStyles={[styles.avatarLarge, styles.alignSelfCenter]}
+                                        source={this.props.source}
+                                        fallbackIcon={this.props.fallbackIcon}
+                                        size={this.props.size}
+                                        type={this.props.type}
+                                    />
+                                ) : (
+                                    <DefaultAvatar />
+                                )}
+                            </View>
                         </Tooltip>
                         <AttachmentPicker type={CONST.ATTACHMENT_PICKER_TYPE.IMAGE}>
                             {({openPicker}) => (
                                 <>
-                                    <Tooltip
-                                        absolute
-                                        text={this.props.translate('avatarWithImagePicker.editImage')}
-                                    >
+                                    <Tooltip text={this.props.translate('avatarWithImagePicker.editImage')}>
                                         <View style={[styles.smallEditIcon, styles.smallAvatarEditIcon]}>
                                             <Icon
                                                 src={Expensicons.Camera}

src/components/AvatarWithIndicator.js

@@ -101,12 +101,12 @@ const AvatarWithIndicator = (props) => {
     const indicatorStyles = [styles.alignItemsCenter, styles.justifyContentCenter, styles.statusIndicator(indicatorColor)];
 
     return (
-        <View style={[styles.sidebarAvatar]}>
-            <Tooltip text={props.tooltipText}>
+        <Tooltip text={props.tooltipText}>
+            <View style={[styles.sidebarAvatar]}>
                 <Avatar source={ReportUtils.getSmallSizeAvatar(props.source)} />
                 {(shouldShowErrorIndicator || shouldShowInfoIndicator) && <View style={StyleSheet.flatten(indicatorStyles)} />}
-            </Tooltip>
-        </View>
+            </View>
+        </Tooltip>
     );
 };
 

src/components/CheckboxWithTooltip/index.js

@@ -26,7 +26,17 @@ const CheckboxWithTooltip = (props) => {
             disabled={props.disabled}
         />
     );
-    return <View style={props.style}>{props.toggleTooltip ? <Tooltip text={props.text}>{checkbox}</Tooltip> : checkbox}</View>;
+    return (
+        <View style={props.style}>
+            {props.toggleTooltip ? (
+                <Tooltip text={props.text}>
+                    <View>{checkbox}</View>
+                </Tooltip>
+            ) : (
+                checkbox
+            )}
+        </View>
+    );
 };
 
 CheckboxWithTooltip.propTypes = propTypes;

src/components/DisplayNames/index.js

@@ -91,7 +91,6 @@ class DisplayNames extends PureComponent {
                               <Tooltip
                                   key={index}
                                   text={tooltip}
-                                  containerStyles={[styles.dInline]}
                                   shiftHorizontal={() => this.getTooltipShiftX(index)}
                               >
                                   {/*  // We need to get the refs to all the names which will be used to correct

src/components/EmojiPicker/CategoryShortcutButton.js

@@ -33,30 +33,25 @@ class CategoryShortcutButton extends PureComponent {
 
     render() {
         return (
-            <Pressable
-                onPress={this.props.onPress}
-                onHoverIn={() => this.setState({isHighlighted: true})}
-                onHoverOut={() => this.setState({isHighlighted: false})}
-                style={({pressed}) => [
-                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)),
-                    styles.categoryShortcutButton,
-                    this.state.isHighlighted && styles.emojiItemHighlighted,
-                ]}
-            >
-                <Tooltip
-                    focusable={false}
-                    containerStyles={[styles.flex1, styles.alignSelfStretch, styles.alignItemsCenter, styles.justifyContentCenter]}
-                    text={this.props.translate(`emojiPicker.headers.${this.props.code}`)}
-                    shiftVertical={-4}
+            <Tooltip text={this.props.translate(`emojiPicker.headers.${this.props.code}`)}>
+                <Pressable
+                    onPress={this.props.onPress}
+                    onHoverIn={() => this.setState({isHighlighted: true})}
+                    onHoverOut={() => this.setState({isHighlighted: false})}
+                    style={({pressed}) => [
+                        StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)),
+                        styles.categoryShortcutButton,
+                        this.state.isHighlighted && styles.emojiItemHighlighted,
+                    ]}
                 >
                     <Icon
                         fill={themeColors.icon}
                         src={this.props.icon}
                         height={variables.iconSizeNormal}
                         width={variables.iconSizeNormal}
                     />
-                </Tooltip>
-            </Pressable>
+                </Pressable>
+            </Tooltip>
         );
     }
 }

src/components/EmojiPicker/EmojiPickerButton.js

@@ -28,10 +28,7 @@ const defaultProps = {
 const EmojiPickerButton = (props) => {
     let emojiPopoverAnchor = null;
     return (
-        <Tooltip
-            containerStyles={[styles.alignSelfEnd]}
-            text={props.translate('reportActionCompose.emoji')}
-        >
+        <Tooltip text={props.translate('reportActionCompose.emoji')}>
             <Pressable
                 ref={(el) => (emojiPopoverAnchor = el)}
                 style={({hovered, pressed}) => [styles.chatItemEmojiButton, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed))]}

src/components/FloatingActionButton.js

@@ -71,10 +71,7 @@ class FloatingActionButton extends PureComponent {
         });
 
         return (
-            <Tooltip
-                absolute
-                text={this.props.translate('common.new')}
-            >
+            <Tooltip text={this.props.translate('common.new')}>
                 <View style={styles.floatingActionButtonContainer}>
                     <AnimatedPressable
                         ref={(el) => (this.fabPressable = el)}

src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js

@@ -36,10 +36,7 @@ const MentionUserRenderer = (props) => {
 
     return (
         <Text>
-            <Tooltip
-                absolute
-                text={loginWhithoutLeadingAt}
-            >
+            <Tooltip text={loginWhithoutLeadingAt}>
                 <Text
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...defaultRendererProps}

src/components/Hoverable/hoverablePropTypes.js

@@ -1,16 +1,9 @@
 import PropTypes from 'prop-types';
 
 const propTypes = {
-    /** Whether to disable additional wrapper around the children. It will only work for single native(View|Text) child.  */
-    absolute: PropTypes.bool,
-
     /** Children to wrap with Hoverable. */
     children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
 
-    /** Styles to be assigned to the Hoverable Container */
-    // eslint-disable-next-line react/forbid-prop-types
-    containerStyles: PropTypes.arrayOf(PropTypes.object),
-
     /** Function that executes when the mouse moves over the children. */
     onHoverIn: PropTypes.func,
 
@@ -19,8 +12,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-    absolute: false,
-    containerStyles: [],
     onHoverIn: () => {},
     onHoverOut: () => {},
 };

src/components/Hoverable/index.js

@@ -1,6 +1,5 @@
 import _ from 'underscore';
 import React, {Component} from 'react';
-import {View} from 'react-native';
 import {propTypes, defaultProps} from './hoverablePropTypes';
 
 /**
@@ -55,61 +54,46 @@ class Hoverable extends Component {
     }
 
     render() {
-        if (this.props.absolute && React.isValidElement(this.props.children)) {
-            return React.cloneElement(React.Children.only(this.props.children), {
-                ref: (el) => {
-                    this.wrapperView = el;
-
-                    // Call the original ref, if any
-                    const {ref} = this.props.children;
-                    if (_.isFunction(ref)) {
-                        ref(el);
-                    }
-                },
-                onMouseEnter: (el) => {
-                    this.setIsHovered(true);
-
-                    if (_.isFunction(this.props.children.props.onMouseEnter)) {
-                        this.props.children.props.onMouseEnter(el);
-                    }
-                },
-                onMouseLeave: (el) => {
-                    this.setIsHovered(false);
+        const child = _.isFunction(this.props.children) ? this.props.children(this.state.isHovered) : this.props.children;
 
-                    if (_.isFunction(this.props.children.props.onMouseLeave)) {
-                        this.props.children.props.onMouseLeave(el);
-                    }
-                },
-                onBlur: (el) => {
-                    if (!this.wrapperView.contains(el.relatedTarget)) {
-                        this.setIsHovered(false);
-                    }
-
-                    if (_.isFunction(this.props.children.props.onBlur)) {
-                        this.props.children.props.onBlur(el);
-                    }
-                },
-            });
+        if (!React.isValidElement(child)) {
+            throw Error('Children is not a valid element.');
         }
-        return (
-            <View
-                style={this.props.containerStyles}
-                ref={(el) => (this.wrapperView = el)}
-                onMouseEnter={() => this.setIsHovered(true)}
-                onMouseLeave={() => this.setIsHovered(false)}
-                onBlur={(el) => {
-                    if (this.wrapperView.contains(el.relatedTarget)) {
-                        return;
-                    }
+
+        return React.cloneElement(React.Children.only(child), {
+            ref: (el) => {
+                this.wrapperView = el;
+
+                // Call the original ref, if any
+                const {ref} = child;
+                if (_.isFunction(ref)) {
+                    ref(el);
+                }
+            },
+            onMouseEnter: (el) => {
+                this.setIsHovered(true);
+
+                if (_.isFunction(child.props.onMouseEnter)) {
+                    child.props.onMouseEnter(el);
+                }
+            },
+            onMouseLeave: (el) => {
+                this.setIsHovered(false);
+
+                if (_.isFunction(child.props.onMouseLeave)) {
+                    child.props.onMouseLeave(el);
+                }
+            },
+            onBlur: (el) => {
+                if (!this.wrapperView.contains(el.relatedTarget)) {
                     this.setIsHovered(false);
-                }}
-            >
-                {
-                    // If this.props.children is a function, call it to provide the hover state to the children.
-                    _.isFunction(this.props.children) ? this.props.children(this.state.isHovered) : this.props.children
                 }
-            </View>
-        );
+
+                if (_.isFunction(child.props.onBlur)) {
+                    child.props.onBlur(el);
+                }
+            },
+        });
     }
 }