fix: hide actions after closing fab group (#4692)

Author: lukewalczak

src/components/FAB/FABGroup.tsx

@@ -222,13 +222,18 @@ const FABGroup = ({
   rippleColor,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+  const { top, bottom, right, left } = useSafeAreaInsets();
+
   const { current: backdrop } = React.useRef<Animated.Value>(
     new Animated.Value(0)
   );
   const animations = React.useRef<Animated.Value[]>(
     actions.map(() => new Animated.Value(open ? 1 : 0))
   );
 
+  const [isClosingAnimationFinished, setIsClosingAnimationFinished] =
+    React.useState(false);
+
   const [prevActions, setPrevActions] = React.useState<
     | {
         icon: IconSource;
@@ -247,6 +252,7 @@ const FABGroup = ({
 
   React.useEffect(() => {
     if (open) {
+      setIsClosingAnimationFinished(false);
       Animated.parallel([
         Animated.timing(backdrop, {
           toValue: 1,
@@ -280,14 +286,33 @@ const FABGroup = ({
             useNativeDriver: true,
           })
         ),
-      ]).start();
+      ]).start(({ finished }) => {
+        if (finished) {
+          setIsClosingAnimationFinished(true);
+        }
+      });
     }
   }, [open, actions, backdrop, scale, isV3]);
 
   const close = () => onStateChange({ open: false });
-
   const toggle = () => onStateChange({ open: !open });
 
+  const handlePress = (e: GestureResponderEvent) => {
+    onPress?.(e);
+    if (!toggleStackOnLongPress || open) {
+      toggle();
+    }
+  };
+
+  const handleLongPress = (e: GestureResponderEvent) => {
+    if (!open || enableLongPressWhenStackOpened) {
+      onLongPress?.(e);
+      if (toggleStackOnLongPress) {
+        toggle();
+      }
+    }
+  };
+
   const { labelColor, backdropColor, stackedFABBackgroundColor } =
     getFABGroupColors({ theme, customBackdropColor });
 
@@ -325,14 +350,17 @@ const FABGroup = ({
       : -8
   );
 
-  const { top, bottom, right, left } = useSafeAreaInsets();
   const containerPaddings = {
     paddingBottom: bottom,
     paddingRight: right,
     paddingLeft: left,
     paddingTop: top,
   };
 
+  const actionsContainerVisibility: ViewStyle = {
+    display: isClosingAnimationFinished ? 'none' : 'flex',
+  };
+
   if (actions.length !== prevActions?.length) {
     animations.current = actions.map(
       (_, i) => animations.current[i] || new Animated.Value(open ? 1 : 0)
@@ -358,7 +386,10 @@ const FABGroup = ({
         ]}
       />
       <View pointerEvents="box-none" style={styles.safeArea}>
-        <View pointerEvents={open ? 'box-none' : 'none'}>
+        <View
+          pointerEvents={open ? 'box-none' : 'none'}
+          style={actionsContainerVisibility}
+        >
           {actions.map((it, i) => {
             const labelTextStyle = {
               color: it.labelTextColor ?? labelColor,
@@ -372,6 +403,11 @@ const FABGroup = ({
                 : it.label;
             const size = typeof it.size !== 'undefined' ? it.size : 'small';
 
+            const handleActionPress = (e: GestureResponderEvent) => {
+              it.onPress(e);
+              close();
+            };
+
             return (
               <View
                 key={i} // eslint-disable-line react/no-array-index-key
@@ -392,10 +428,7 @@ const FABGroup = ({
                   <View>
                     <Card
                       mode={isV3 ? 'contained' : 'elevated'}
-                      onPress={(e) => {
-                        it.onPress(e);
-                        close();
-                      }}
+                      onPress={handleActionPress}
                       accessibilityHint={it.accessibilityHint}
                       importantForAccessibility="no-hide-descendants"
                       accessibilityElementsHidden={true}
@@ -440,10 +473,7 @@ const FABGroup = ({
                   ]}
                   accessibilityElementsHidden={true}
                   theme={theme}
-                  onPress={(e) => {
-                    it.onPress(e);
-                    close();
-                  }}
+                  onPress={handleActionPress}
                   importantForAccessibility="no-hide-descendants"
                   testID={it.testID}
                   visible={open}
@@ -454,20 +484,8 @@ const FABGroup = ({
           })}
         </View>
         <FAB
-          onPress={(e) => {
-            onPress?.(e);
-            if (!toggleStackOnLongPress || open) {
-              toggle();
-            }
-          }}
-          onLongPress={(e) => {
-            if (!open || enableLongPressWhenStackOpened) {
-              onLongPress?.(e);
-              if (toggleStackOnLongPress) {
-                toggle();
-              }
-            }
-          }}
+          onPress={handlePress}
+          onLongPress={handleLongPress}
           delayLongPress={delayLongPress}
           icon={icon}
           color={colorProp}