From 528ed010a0448926a6abf1ad7c0c5a8718b09069 Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Tue, 27 Aug 2024 18:17:39 +0800
Subject: [PATCH] Fixed Radix UI related custom validity error (#20829)

ref DES-755

- a direct child of a form control primitive should be a form element
- for TextField component, a div was the direct child
- this moves the input element to the form control primitive
---
 .../src/global/form/TextField.tsx                    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/admin-x-design-system/src/global/form/TextField.tsx b/apps/admin-x-design-system/src/global/form/TextField.tsx
index b173b7c376..86b39631c9 100644
--- a/apps/admin-x-design-system/src/global/form/TextField.tsx
+++ b/apps/admin-x-design-system/src/global/form/TextField.tsx
@@ -107,13 +107,13 @@ const TextField: React.FC<TextFieldProps> = ({
 
     field = (
         <FormPrimitive.Field name={id} asChild>
-            <FormPrimitive.Control asChild>
-                <div className={fieldContainerClasses}>
+            <div className={fieldContainerClasses}>
+                <FormPrimitive.Control asChild>
                     {inputField}
-                    {!unstyled && !clearBg && <div className={bgClasses ? bgClasses : ''}></div>}
-                    {rightPlaceholder && <span className={rightPlaceholderClasses || ''}>{rightPlaceholder}</span>}
-                </div>
-            </FormPrimitive.Control>
+                </FormPrimitive.Control>
+                {!unstyled && !clearBg && <div className={bgClasses ? bgClasses : ''}></div>}
+                {rightPlaceholder && <span className={rightPlaceholderClasses || ''}>{rightPlaceholder}</span>}
+            </div>
         </FormPrimitive.Field>
     );