fix: error state and auto focus for custom input

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.2.20-beta-1",
+    "version": "0.2.20-beta-8",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -17,6 +17,7 @@
 import { CustomInputProps } from './Types'
 import { ReactComponent as Info } from '../../Assets/Icon/ic-info-filled-override.svg'
 import { ReactComponent as ErrorIcon } from '../../Assets/Icon/ic-warning.svg'
+import { useEffect, useRef } from 'react'
 
 export const CustomInput = ({
     name,
@@ -39,7 +40,6 @@ export const CustomInput = ({
     handleOnBlur,
     readOnly = false,
     noTrim = false,
-    ref,
     onKeyPress,
     defaultValue,
     onKeyDown,
@@ -48,6 +48,17 @@ export const CustomInput = ({
     inputWrapClassName = '',
     inputProps = {},
 }: CustomInputProps) => {
+    const inputRef = useRef<HTMLInputElement>()
+
+    useEffect(() => {
+        setTimeout(() => {
+            // Added timeout to ensure the autofocus code is executed post the re-renders
+            if (inputRef.current && autoFocus) {
+                inputRef.current.focus()
+            }
+        }, 100)
+    }, [autoFocus])
+
     function handleError(error: any): any[] {
         if (!Array.isArray(error)) {
             return [error]
@@ -68,9 +79,9 @@ export const CustomInput = ({
     }
 
     const renderFormErrorWithIcon = (error: string) => (
-        <div className="form__error" key={error}>
-            <ErrorIcon className="form__icon form__icon--error" />
-            {error}
+        <div className="flex left mt-4 mb-4 dc__gap-4 cr-5 fs-11 lh-16 fw-4" key={error}>
+            <ErrorIcon className="icon-dim-16 p-1 form__icon--error dc__align-self-start dc__no-shrink" />
+            <span>{error}</span>
             {error && typeof additionalErrorInfo === 'function' && additionalErrorInfo()}
         </div>
     )
@@ -124,13 +135,13 @@ export const CustomInput = ({
                 tabIndex={tabIndex}
                 autoFocus={autoFocus}
                 readOnly={readOnly}
-                ref={ref}
                 onKeyPress={onKeyPress}
                 defaultValue={defaultValue}
                 onKeyDown={onKeyDown}
                 required={required}
                 // Will be passing other props like other data attributes etc from inputProps
                 {...inputProps}
+                ref={inputRef}
             />
 
             {getInputError()}

src/Common/CustomInput/CustomInput.tsx

@@ -37,7 +37,6 @@ export interface CustomInputProps {
     handleOnBlur?: (e) => void
     readOnly?: boolean
     noTrim?: boolean
-    ref?: React.LegacyRef<HTMLInputElement>
     onKeyPress?: (e) => void
     defaultValue?: string | number | ReadonlyArray<string> | undefined
     onKeyDown?: (e) => void