From 4c9bfe77e063c1546fc2316040ab4c1ea2dda45d Mon Sep 17 00:00:00 2001 From: checktheroads Date: Sat, 2 Jan 2021 12:54:59 -0700 Subject: [PATCH] fix invalid prop forwarding for custom motion components --- hyperglass/ui/components/util/animated.ts | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/hyperglass/ui/components/util/animated.ts b/hyperglass/ui/components/util/animated.ts index 99fb7dc..2176d00 100644 --- a/hyperglass/ui/components/util/animated.ts +++ b/hyperglass/ui/components/util/animated.ts @@ -1,8 +1,13 @@ import { chakra } from '@chakra-ui/react'; import { motion } from 'framer-motion'; -export const AnimatedDiv = motion.custom(chakra.div); -export const AnimatedForm = motion.custom(chakra.form); -export const AnimatedH1 = motion.custom(chakra.h1); -export const AnimatedH3 = motion.custom(chakra.h3); -export const AnimatedButton = motion.custom(chakra.button); +/** + * Even though this seems to do nothing, this fixes the issue of Chakra Factory forwarding + * framer-motion props when it shouldn't. + * + * @see https://chakra-ui.com/docs/features/chakra-factory + */ +const shouldForwardProp = () => true; + +export const AnimatedDiv = chakra(motion.div, { shouldForwardProp }); +export const AnimatedForm = chakra(motion.form, { shouldForwardProp });