From 9134ed8ce46d3f86ff548bd5e4c1a5a60a018c8f Mon Sep 17 00:00:00 2001 From: Harsh Singh Date: Mon, 18 Nov 2024 00:41:13 +0530 Subject: [PATCH] fix: prevent non-boolean 'active' prop from being forwarded to DOM (#8534) Fixes: #8533 --- .../src/modules/ui/layout/tab/components/Tab.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx index 987eea1706..af965ce982 100644 --- a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx +++ b/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx @@ -1,3 +1,4 @@ +import isPropValid from '@emotion/is-prop-valid'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { ReactElement } from 'react'; @@ -16,11 +17,9 @@ type TabProps = { to?: string; }; -const StyledTab = styled.button<{ - active?: boolean; - disabled?: boolean; - to?: string; -}>` +const StyledTab = styled('button', { + shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'active', +})<{ active?: boolean; disabled?: boolean; to?: string }>` align-items: center; border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; border-color: ${({ theme, active }) =>