From 83b90089879216ce0df39208d9ddc38b1b0de4df Mon Sep 17 00:00:00 2001
From: Axel Delafosse <axeldelafosse@gmail.com>
Date: Tue, 4 Jan 2022 11:13:24 +0100
Subject: [PATCH] add animate presence to select list on web

---
 .../select/lib/select-list.web.tsx            | 57 ++++++++++---------
 1 file changed, 31 insertions(+), 26 deletions(-)

diff --git a/packages/design-system/select/lib/select-list.web.tsx b/packages/design-system/select/lib/select-list.web.tsx
index 504786ec95..454655fbd3 100644
--- a/packages/design-system/select/lib/select-list.web.tsx
+++ b/packages/design-system/select/lib/select-list.web.tsx
@@ -1,4 +1,4 @@
-import { MotiView } from "moti";
+import { MotiView, AnimatePresence } from "moti";
 import { forwardRef, useMemo } from "react";
 import { tw } from "../../tailwind";
 
@@ -13,30 +13,35 @@ export const SelectList: React.FC<SelectListProps> = forwardRef(
         tw`z-20 absolute w-full top-100% p-1 mt-2 bg-white dark:bg-black rounded-2xl`,
       []
     );
-    return open ? (
-      <MotiView
-        ref={ref}
-        from={{
-          opacity: 0,
-          translateY: -24,
-        }}
-        animate={{
-          opacity: 1,
-          translateY: 0,
-        }}
-        exit={{
-          opacity: 0,
-          translateY: -24,
-        }}
-        transition={{
-          type: "timing",
-          duration: 250,
-        }}
-        style={containerStyle}
-        {...rest}
-      >
-        {children}
-      </MotiView>
-    ) : null;
+
+    return (
+      <AnimatePresence>
+        {open ? (
+          <MotiView
+            ref={ref}
+            from={{
+              opacity: 0,
+              translateY: -24,
+            }}
+            animate={{
+              opacity: 1,
+              translateY: 0,
+            }}
+            exit={{
+              opacity: 0,
+              translateY: -24,
+            }}
+            transition={{
+              type: "timing",
+              duration: 250,
+            }}
+            style={containerStyle}
+            {...rest}
+          >
+            {children}
+          </MotiView>
+        ) : null}
+      </AnimatePresence>
+    );
   }
 );