diff --git a/web/packages/ui/src/Input/Input.tsx b/web/packages/ui/src/Input/Input.tsx index 6ec2e303fe..3458b0cba1 100644 --- a/web/packages/ui/src/Input/Input.tsx +++ b/web/packages/ui/src/Input/Input.tsx @@ -1,4 +1,4 @@ -import { InputHTMLAttributes, PropsWithChildren } from 'react'; +import { InputHTMLAttributes, PropsWithChildren, useMemo } from 'react'; import { cx } from 'classix'; import { Stack } from '../Stack'; import { Row } from '../Row'; @@ -18,12 +18,15 @@ export function Input({ endDecorator, ...rest }: InputProps) { - const VerticalContainer = label || helperText + const VerticalContainer = useMemo(() => label || helperText ? (props: PropsWithChildren) => - : (props: PropsWithChildren) => <>{props.children}; - const HorizontalContainer = startDecorator || endDecorator + : (props: PropsWithChildren) => <>{props.children} + , [label, helperText]); + const HorizontalContainer = useMemo(() => startDecorator || endDecorator ? (props: PropsWithChildren) => - : (props: PropsWithChildren) => <>{props.children}; + : (props: PropsWithChildren) => <>{props.children} + , [startDecorator, endDecorator]); + return ( {label && }