feat #139 - Add focused prop to FormInput and allow refs to be passed…

… to input (#140)

Closes #139

Co-authored-by: github-actions <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dassana-io/web-components",
-	"version": "0.6.5",
+	"version": "0.6.6",
 	"publishConfig": {
 		"registry": "https://npm.pkg.github.com/dassana-io"
 	},

src/components/Form/FormInput/FormInput.test.tsx

@@ -6,8 +6,19 @@ import React from 'react'
 import FormInput, { FormInputProps } from './index'
 import { mount, ReactWrapper } from 'enzyme'
 
+const mockFocus = jest.fn()
+
+jest.mock('react', () => ({
+	...(jest.requireActual('react') as {}),
+	useRef: () => ({
+		current: {
+			focus: mockFocus
+		}
+	})
+}))
+
 jest.mock('react-hook-form', () => ({
-	...jest.requireActual('react-hook-form'),
+	...(jest.requireActual('react-hook-form') as {}),
 	Controller: () => <div />,
 	useFormContext: () => ({
 		control: jest.fn(),
@@ -90,4 +101,20 @@ describe('FormInput', () => {
 			required: true
 		})
 	})
+
+	it('focuses on the input if required', () => {
+		wrapper = mount(
+			<FieldContext.Provider
+				value={{
+					initialValues: {},
+					loading: true,
+					onSubmit: mockOnSubmit
+				}}
+			>
+				<FormInput focused name='foo' required />
+			</FieldContext.Provider>
+		)
+
+		expect(mockFocus).toHaveBeenCalled()
+	})
 })

src/components/Form/FormInput/index.tsx

@@ -1,29 +1,40 @@
+import { Input as AntDInput } from 'antd'
 import { BaseFieldProps } from '../types'
 import FieldLabel from '../FieldLabel'
 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, useContext } from 'react'
+import React, { FC, useContext, useEffect, useRef } from 'react'
 
 export interface FormInputProps
 	extends BaseFieldProps,
-		Omit<InputProps, 'onChange' | 'value'> {}
+		Omit<InputProps, 'onChange' | 'value'> {
+	focused?: boolean
+}
 
 const FormInput: FC<FormInputProps> = ({
 	fullWidth = false,
 	label,
 	labelSkeletonWidth,
+	focused,
 	name,
 	required,
 	rules = {},
 	...rest
 }: FormInputProps) => {
+	const inputRef = useRef<AntDInput>(null)
 	const { control, errors } = useFormContext()
 	const { initialValues, loading } = useContext<FieldContextProps>(
 		FieldContext
 	)
 
+	useEffect(() => {
+		if (focused && inputRef.current) {
+			inputRef.current.focus()
+		}
+	}, [focused])
+
 	if (required) {
 		rules.required = true
 	}
@@ -50,6 +61,7 @@ const FormInput: FC<FormInputProps> = ({
 						dataTag={getFormFieldDataTag(name)}
 						error={errors[name]}
 						fullWidth={fullWidth}
+						inputRef={inputRef}
 						loading={loading}
 						onChange={onChange}
 						value={value}

src/components/Input/Input.test.tsx

@@ -1,8 +1,9 @@
+import { act } from 'react-dom/test-utils'
 import { Input as AntDInput } from 'antd'
 import { Input } from './index'
-import React from 'react'
 import { Skeleton } from '../Skeleton'
 import { mount, ReactWrapper, shallow } from 'enzyme'
+import React, { createRef } from 'react'
 
 let wrapper: ReactWrapper
 
@@ -35,6 +36,20 @@ describe('Input', () => {
 		expect(wrapper.find(AntDInput).props().disabled).toBeTruthy()
 	})
 
+	it('correctly passes the ref if one is provided', () => {
+		const inputRef = createRef<AntDInput>()
+
+		wrapper = mount(<Input inputRef={inputRef} />)
+
+		expect(document.activeElement?.tagName).toMatch('BODY')
+
+		act(() => {
+			inputRef.current?.focus()
+		})
+
+		expect(document.activeElement?.tagName).toMatch('INPUT')
+	})
+
 	it('correctly passes the placeholder prop', () => {
 		wrapper = mount(<Input placeholder='Testing' />)
 

src/components/Input/index.tsx

@@ -11,7 +11,7 @@ import {
 	fieldErrorStyles
 } from '../assets/styles/styleguide'
 import { generateInputSkeletonStyles, generateInputStyles } from './utils'
-import React, { FC } from 'react'
+import React, { FC, RefObject } from 'react'
 
 const { dark, light } = ThemeType
 
@@ -45,6 +45,7 @@ const InputSkeleton: FC<InputProps> = (props: InputProps) => {
 }
 
 export interface InputProps extends BaseFormElementProps {
+	inputRef?: RefObject<AntDInput>
 	/**
 	 * Type of input (ex: text, password)
 	 * @default text
@@ -57,6 +58,7 @@ export const Input: FC<InputProps> = (props: InputProps) => {
 		classes = [],
 		dataTag,
 		disabled = false,
+		inputRef,
 		onChange,
 		error = false,
 		loading = false,
@@ -94,6 +96,7 @@ export const Input: FC<InputProps> = (props: InputProps) => {
 			className={cn(componentClasses.container, inputClasses)}
 			disabled={disabled}
 			placeholder={placeholder}
+			ref={inputRef}
 			type={type}
 			{...controlledCmpProps}
 			{...getDataTestAttributeProp('input', dataTag)}