feat #218 - Add 'focused' prop to comps related to Form

src/components/Button/index.tsx

@@ -1,7 +1,6 @@
 import 'antd/lib/button/style/index.css'
 import 'antd/lib/spin/style/index.css'
 import { Button as AntDButton } from 'antd'
-import { ButtonProps as AntDButtonProps } from 'antd/es/button'
 import classnames from 'classnames'
 import { CommonComponentProps } from '../types'
 import { createUseStyles } from 'react-jss'
@@ -38,6 +37,7 @@ export interface ButtonProps extends CommonComponentProps {
 	 * Adds the disabled attribute and styles (opacity, gray scale filter, no pointer events).
 	 */
 	disabled?: boolean
+	focused?: boolean
 	/**
 	 * Renders a skeleton for the button.
 	 */
@@ -65,27 +65,25 @@ export const Button: FC<ButtonProps> = ({
 	classes = [],
 	dataTag,
 	disabled = false,
+	focused = false,
 	loading = false,
 	onClick,
 	pending = false,
 	primary = false,
 	skeletonHeight = 32,
 	skeletonWidth = 75
 }: ButtonProps) => {
-	const antDProps: AntDButtonProps = {
-		className: classnames(classes),
-		disabled: pending || disabled,
-		onClick,
-		type: primary ? 'primary' : 'default'
-	}
-
 	useStyles()
 
 	return loading ? (
 		<Skeleton height={skeletonHeight} width={skeletonWidth} />
 	) : (
 		<AntDButton
-			{...antDProps}
+			autoFocus={focused}
+			className={classnames(classes)}
+			disabled={pending || disabled}
+			onClick={onClick}
+			type={primary ? 'primary' : 'default'}
 			{...getDataTestAttributeProp('button', dataTag)}
 		>
 			{pending && (

src/components/Form/FormInput/index.tsx

@@ -7,7 +7,7 @@ import { getFormFieldDataTag } from '../utils'
 import { Controller, useFormContext } from 'react-hook-form'
 import FieldContext, { FieldContextProps } from '../FieldContext'
 import { Input, InputProps } from 'components/Input'
-import React, { FC, KeyboardEvent, useContext, useEffect, useRef } from 'react'
+import React, { FC, KeyboardEvent, useContext, useRef } from 'react'
 
 export interface FormInputProps
 	extends BaseFieldProps,
@@ -42,12 +42,6 @@ const FormInput: FC<FormInputProps> = ({
 		if (e.key === 'Enter') e.preventDefault()
 	}
 
-	useEffect(() => {
-		if (focused && inputRef.current) {
-			inputRef.current.focus()
-		}
-	}, [focused])
-
 	if (required) {
 		rules.required = true
 	}
@@ -70,6 +64,7 @@ const FormInput: FC<FormInputProps> = ({
 					<Input
 						dataTag={getFormFieldDataTag(name)}
 						error={errors[name]}
+						focused={focused}
 						fullWidth={fullWidth}
 						inputRef={inputRef}
 						loading={loading}

src/components/Form/FormTimeInput/index.tsx

@@ -16,7 +16,6 @@ export interface FormTimeInputProps
 const FormTimeInput: FC<FormTimeInputProps> = ({
 	label,
 	labelSkeletonWidth,
-	focused,
 	fullWidth,
 	name,
 	required,

src/components/Input/index.tsx

@@ -37,6 +37,7 @@ export interface InputProps extends BaseFormElementProps {
 	addonAfter?: string
 	addonBefore?: string
 	inputRef?: RefObject<AntDInput>
+	focused?: boolean
 	onFocus?: () => void
 	onKeyDown?: (e: KeyboardEvent) => void
 	/**
@@ -53,6 +54,7 @@ export const Input: FC<InputProps> = (props: InputProps) => {
 		classes = [],
 		dataTag,
 		disabled = false,
+		focused = false,
 		inputRef,
 		onBlur = noop,
 		onChange,
@@ -93,6 +95,7 @@ export const Input: FC<InputProps> = (props: InputProps) => {
 		<AntDInput
 			addonAfter={addonAfter}
 			addonBefore={addonBefore}
+			autoFocus={focused}
 			className={cn(componentClasses.container, inputClasses)}
 			disabled={disabled}
 			onBlur={onBlur}

src/components/TimeInput/index.tsx

@@ -20,6 +20,7 @@ export interface TimeInputProps
 	 * @default 'hh:mm A'
 	 * */
 	displayFormat?: string
+	focused?: boolean
 	onChange?: (value: number) => void
 	onFocus?: () => void
 	/**
@@ -47,6 +48,7 @@ export const TimeInput: FC<TimeInputProps> = (props: TimeInputProps) => {
 		dataTag,
 		disabled = false,
 		displayFormat = 'hh:mm A',
+		focused = false,
 		onBlur = noop,
 		onChange,
 		onFocus = noop,
@@ -87,6 +89,7 @@ export const TimeInput: FC<TimeInputProps> = (props: TimeInputProps) => {
 		<InputSkeleton width={120} />
 	) : (
 		<AntDTimeInput
+			autoFocus={focused}
 			className={cn({ [componentClasses.error]: error }, classes)}
 			defaultValue={formatTime(format, defaultValue)}
 			disabled={disabled}