Merge pull request #13671 from 0xmiroslav/issue-13638

fix tooltip position changes after closing fab menu
Expensify · Dec 16, 2022 · b0f6785 · b0f6785
2 parents c71c13d + 30b1101
commit b0f6785
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 20 deletions.
diff --git a/src/components/FloatingActionButton.js b/src/components/FloatingActionButton.js
@@ -1,5 +1,7 @@
 import React, {PureComponent} from 'react';
-import {Pressable, Animated, Easing} from 'react-native';
+import {
+    Pressable, Animated, Easing, View,
+} from 'react-native';
 import PropTypes from 'prop-types';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
@@ -72,22 +74,24 @@ class FloatingActionButton extends PureComponent {
 
         return (
             <Tooltip absolute text={this.props.translate('common.new')}>
-                <AnimatedPressable
-                    ref={el => this.fabPressable = el}
-                    accessibilityLabel={this.props.accessibilityLabel}
-                    accessibilityRole={this.props.accessibilityRole}
-                    onPress={(e) => {
+                <View style={styles.floatingActionButtonContainer}>
+                    <AnimatedPressable
+                        ref={el => this.fabPressable = el}
+                        accessibilityLabel={this.props.accessibilityLabel}
+                        accessibilityRole={this.props.accessibilityRole}
+                        onPress={(e) => {
                         // Drop focus to avoid blue focus ring.
-                        this.fabPressable.blur();
-                        this.props.onPress(e);
-                    }}
-                    style={[
-                        styles.floatingActionButton,
-                        StyleUtils.getAnimatedFABStyle(rotate, backgroundColor),
-                    ]}
-                >
-                    <AnimatedIcon src={Expensicons.Plus} fill={fill} />
-                </AnimatedPressable>
+                            this.fabPressable.blur();
+                            this.props.onPress(e);
+                        }}
+                        style={[
+                            styles.floatingActionButton,
+                            StyleUtils.getAnimatedFABStyle(rotate, backgroundColor),
+                        ]}
+                    >
+                        <AnimatedIcon src={Expensicons.Plus} fill={fill} />
+                    </AnimatedPressable>
+                </View>
             </Tooltip>
         );
     }

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -1003,16 +1003,19 @@ const styles = {
         },
     },
 
-    floatingActionButton: {
-        backgroundColor: themeColors.success,
+    floatingActionButtonContainer: {
         position: 'absolute',
-        height: variables.componentSizeLarge,
-        width: variables.componentSizeLarge,
         right: 20,
 
         // The bottom of the floating action button should align with the bottom of the compose box.
         // The value should be equal to the height + marginBottom + marginTop of chatItemComposeSecondaryRow
         bottom: 25,
+    },
+
+    floatingActionButton: {
+        backgroundColor: themeColors.success,
+        height: variables.componentSizeLarge,
+        width: variables.componentSizeLarge,
         borderRadius: 999,
         alignItems: 'center',
         justifyContent: 'center',