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

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>}
+                </FormPrimitive.Control>
-                    {rightPlaceholder && <span className={rightPlaceholderClasses || ''}>{rightPlaceholder}</span>}
+                {!unstyled && !clearBg && <div className={bgClasses ? bgClasses : ''}></div>}
-                </div>
+                {rightPlaceholder && <span className={rightPlaceholderClasses || ''}>{rightPlaceholder}</span>}
-            </FormPrimitive.Control>
+            </div>
         </FormPrimitive.Field>
     );