From 0bf79e3141793df6f544b3279963a50d4da15ab4 Mon Sep 17 00:00:00 2001
From: Aleksandar Toplek <aleksandar.toplek@gmail.com>
Date: Sun, 8 Oct 2023 21:54:52 +0200
Subject: [PATCH] fix(ui): Input unmounting on prop changes

---
 web/packages/ui/src/Input/Input.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

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) => <Stack spacing={1} {...props} />
-        : (props: PropsWithChildren) => <>{props.children}</>;
-    const HorizontalContainer = startDecorator || endDecorator
+        : (props: PropsWithChildren) => <>{props.children}</>
+    , [label, helperText]);
+    const HorizontalContainer = useMemo(() => startDecorator || endDecorator
         ? (props: PropsWithChildren) => <Row spacing={1} {...props} />
-        : (props: PropsWithChildren) => <>{props.children}</>;
+        : (props: PropsWithChildren) => <>{props.children}</>
+    , [startDecorator, endDecorator]);
+
     return (
         <VerticalContainer>
             {label && <label className="text-sm font-medium">{label}</label>}