fix(tools): FromControl disregard the default attributes (#49411)

Co-authored-by: ahmad abdolsaheb <ahmad.abdolsaheb@gmail.com>

tools/ui-components/src/form-control/form-control.tsx

@@ -2,58 +2,51 @@ import React from 'react';
 
 import { FormControlFeedback as Feedback } from './form-control-feedback';
 import { FormControlStatic as Static } from './form-control-static';
-import { FormControlProps, FormControlElement } from './types';
+import { FormControlProps } from './types';
 
 // Uses controlId from <FormGroup> if not explicitly specified.
 // type Only relevant if componentClass is 'input'.
 
-const FormControl = React.forwardRef<FormControlElement, FormControlProps>(
-  (
-    {
-      className,
-      id,
-      testId,
-      onChange,
-      value,
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      componentClass: Component = 'input',
-      placeholder,
-      name,
-      required,
-      type
-    },
-    ref
-  ): JSX.Element => {
-    let defaultClasses =
-      'outline-0 block w-full py-1.5 px-2.5 text-md text-foreground-primary ' +
-      'bg-background-primary bg-none rounded-none border-1 border-solid ' +
-      'border-background-quaternary shadow-none ' +
-      'transition ease-in-out duration-150 focus:border-foreground-tertiary';
+const FormControl = ({
+  id,
+  className,
+  testId,
+  onChange,
+  value,
+  componentClass,
+  placeholder,
+  name,
+  required,
+  type,
+  ...restProps
+}: FormControlProps): JSX.Element => {
+  const defaultClasses =
+    'outline-0 block w-full py-1.5 px-2.5 text-md text-foreground-primary ' +
+    'bg-background-primary bg-none rounded-none border-1 border-solid ' +
+    'border-background-quaternary shadow-none ' +
+    'transition ease-in-out duration-150 focus:border-foreground-tertiary';
+  const Component = componentClass || 'input';
+  let variantClass;
+  if (Component !== 'textarea') variantClass = ' h-8';
 
-    let variantClass;
-    if (Component === 'textarea') variantClass = 'h-auto';
-    else defaultClasses += 'h-8';
+  //row and componentClass
+  const classes = [defaultClasses, variantClass, className].join(' ');
 
-    //row and componentClass
-    const classes = [defaultClasses, variantClass, className].join(' ');
-
-    return (
-      <Component
-        ref={ref}
-        id={id}
-        data-testid={testId}
-        className={classes}
-        value={value}
-        required={required}
-        onChange={onChange}
-        name={name}
-        placeholder={placeholder}
-        type={type}
-      />
-    );
-  }
-);
+  return (
+    <Component
+      id={id}
+      data-testid={testId}
+      className={classes}
+      value={value}
+      required={required}
+      onChange={onChange}
+      name={name}
+      placeholder={placeholder}
+      type={type}
+      {...restProps}
+    />
+  );
+};
 const MainFormControl = Object.assign(FormControl, { Feedback, Static });
 
-FormControl.displayName = 'FormControl';
 export { MainFormControl as FormControl };

tools/ui-components/src/form-control/types.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export type FormControlElement = HTMLInputElement | HTMLTextAreaElement;
+type FormControlElement = HTMLInputElement | HTMLTextAreaElement;
 
 type ChangibleValues =
   | {
@@ -20,10 +20,10 @@ type ChangibleValues =
     };
 
 export type FormControlProps = React.HTMLAttributes<FormControlElement> & {
-  className?: string;
   id?: string;
+  className?: string;
   testId?: string;
-  componentClass?: typeof React.Component;
+  componentClass?: 'textarea' | 'input';
   placeholder?: string;
   name?: string;
   required?: boolean;