From 9d4c7ed9cf46df182437089e746e255b4b22bd42 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sat, 23 Sep 2023 10:18:13 -0300
Subject: [PATCH] fix(ripple): clear ripples on animation complete (#1681)

---
 .changeset/big-monkeys-notice.md          | 5 +++++
 packages/components/ripple/src/ripple.tsx | 5 +++--
 2 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/big-monkeys-notice.md

diff --git a/.changeset/big-monkeys-notice.md b/.changeset/big-monkeys-notice.md
new file mode 100644
index 0000000000..f64badec94
--- /dev/null
+++ b/.changeset/big-monkeys-notice.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/ripple": patch
+---
+
+Fix #1656 clear ripples on animation complete
diff --git a/packages/components/ripple/src/ripple.tsx b/packages/components/ripple/src/ripple.tsx
index 5f8cb4e617..e931fe6283 100644
--- a/packages/components/ripple/src/ripple.tsx
+++ b/packages/components/ripple/src/ripple.tsx
@@ -45,8 +45,9 @@ const Ripple: FC<RippleProps> = (props) => {
                 ...style,
               }}
               transition={{duration}}
-              onAnimationEnd={() => onClear(ripple.key)}
-              onTransitionEnd={() => onClear(ripple.key)}
+              onAnimationComplete={() => {
+                onClear(ripple.key);
+              }}
               {...motionProps}
             />
           </AnimatePresence>