feat #166 - Form Updates (#167)

* feat #166 - Form Updates Closes #166 * Update failing snapshots * feat #166 - Prevent Enter in input from automatically submitting form * Remove unnecessary tests Co-authored-by: github-actions <[email protected]>
dassana-io · Dec 7, 2020 · 31f1a62 · 31f1a62
1 parent 9254d2f
commit 31f1a62
Show file tree

Hide file tree

Showing 16 changed files with 54 additions and 158 deletions.
diff --git a/src/components/Form/FieldContext.ts b/src/components/Form/FieldContext.ts
@@ -3,7 +3,6 @@ import { FieldValues } from 'react-hook-form/dist/types/form'
 import { SubmitHandler } from 'react-hook-form'
 
 export interface FieldContextProps {
-	initialValues: FieldValues
 	loading: boolean
 	onSubmit: SubmitHandler<FieldValues>
 }

diff --git a/src/components/Form/Form.test.tsx b/src/components/Form/Form.test.tsx
@@ -52,37 +52,12 @@ describe('Form', () => {
 	it('passes the correct props to FieldContext provider', () => {
 		expect(wrapper.find(FieldContext.Provider).props().value).toMatchObject(
 			{
-				initialValues: mockInitialValues,
 				loading: false,
 				onSubmit: mockOnSubmit
 			}
 		)
 	})
 
-	it('correctly defaults initial values to empty object if none is passed in', () => {
-		wrapper = shallow(
-			<Form onSubmit={mockOnSubmit}>
-				<FormSubmitButton>Submit</FormSubmitButton>
-			</Form>
-		)
-
-		expect(
-			wrapper.find(FieldContext.Provider).props().value
-		).toMatchObject({ initialValues: {} })
-	})
-
-	it('correctly updates initial values', () => {
-		const form = mount(
-			<Form onSubmit={mockOnSubmit}>
-				<FormSubmitButton>Submit</FormSubmitButton>
-			</Form>
-		)
-
-		form.setProps({ initialValues: mockInitialValues })
-
-		expect(mockReset).toHaveBeenCalledWith(mockInitialValues)
-	})
-
 	it('exposes form methods when a ref is passed', () => {
 		const formRef = createRef<UseFormMethods>()
 

diff --git a/src/components/Form/FormInput/FormInput.test.tsx b/src/components/Form/FormInput/FormInput.test.tsx
@@ -40,7 +40,6 @@ const getMountedFormInput = (formInputProps: Partial<FormInputProps> = {}) =>
 	mount(
 		<FieldContext.Provider
 			value={{
-				initialValues: { foo: 'bar' },
 				loading: true,
 				onSubmit: mockOnSubmit
 			}}
@@ -62,10 +61,6 @@ describe('FormInput', () => {
 		expect(wrapper).toHaveLength(1)
 	})
 
-	it('correctly passes a default value from initial values if it exists', () => {
-		expect(wrapper.find(Controller).props().defaultValue).toEqual('bar')
-	})
-
 	it('should render an Input component', () => {
 		const input = wrapper.find(Controller).invoke('render')!(mockRenderArgs)
 
@@ -76,7 +71,6 @@ describe('FormInput', () => {
 		wrapper = mount(
 			<FieldContext.Provider
 				value={{
-					initialValues: {},
 					loading: true,
 					onSubmit: mockOnSubmit
 				}}
@@ -102,6 +96,30 @@ describe('FormInput', () => {
 		expect(mockFocus).toHaveBeenCalled()
 	})
 
+	it('prevents default behavior when enter is pressed within the input', () => {
+		const input = wrapper.find(Controller).invoke('render')!(mockRenderArgs)
+		const mockPreventDefault = jest.fn()
+
+		input.props.onKeyDown({
+			key: 'Enter',
+			preventDefault: mockPreventDefault
+		})
+
+		expect(mockPreventDefault).toHaveBeenCalled()
+	})
+
+	it('does not prevent default behavior when other keys are pressed within the input', () => {
+		const input = wrapper.find(Controller).invoke('render')!(mockRenderArgs)
+		const mockPreventDefault = jest.fn()
+
+		input.props.onKeyDown({
+			key: 'Escape',
+			preventDefault: mockPreventDefault
+		})
+
+		expect(mockPreventDefault).not.toHaveBeenCalled()
+	})
+
 	it('clears errors on focus if there are any', () => {
 		wrapper = getMountedFormInput()
 

diff --git a/src/components/Form/FormInput/index.tsx b/src/components/Form/FormInput/index.tsx
@@ -6,7 +6,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, useContext, useEffect, useRef } from 'react'
+import React, { FC, KeyboardEvent, useContext, useEffect, useRef } from 'react'
 
 export interface FormInputProps
 	extends BaseFieldProps,
@@ -26,16 +26,19 @@ const FormInput: FC<FormInputProps> = ({
 }: FormInputProps) => {
 	const inputRef = useRef<AntDInput>(null)
 	const { clearErrors, control, errors } = useFormContext()
-	const { initialValues, loading } = useContext<FieldContextProps>(
-		FieldContext
-	)
+	const { loading } = useContext<FieldContextProps>(FieldContext)
 
 	const errorMsg = errors[name] ? errors[name].message : ''
 
 	const onInputFocus = () => {
 		if (errors[name]) clearErrors(name)
 	}
 
+	const onKeyDown = (e: KeyboardEvent) => {
+		// This prevents the form from being automatically submitted when the Enter button is pressed
+		if (e.key === 'Enter') e.preventDefault()
+	}
+
 	useEffect(() => {
 		if (focused && inputRef.current) {
 			inputRef.current.focus()
@@ -46,8 +49,6 @@ const FormInput: FC<FormInputProps> = ({
 		rules.required = true
 	}
 
-	const defaultValue = (initialValues[name] as string) || ''
-
 	return (
 		<div>
 			{label && (
@@ -61,7 +62,6 @@ const FormInput: FC<FormInputProps> = ({
 			)}
 			<Controller
 				control={control}
-				defaultValue={defaultValue}
 				name={name}
 				render={({ onChange, value }) => (
 					<Input
@@ -72,6 +72,7 @@ const FormInput: FC<FormInputProps> = ({
 						loading={loading}
 						onChange={onChange}
 						onFocus={onInputFocus}
+						onKeyDown={onKeyDown}
 						value={value}
 						{...rest}
 					/>

diff --git a/src/components/Form/FormRadioGroup/FormRadioGroup.test.tsx b/src/components/Form/FormRadioGroup/FormRadioGroup.test.tsx
@@ -31,7 +31,6 @@ beforeEach(() => {
 	wrapper = mount(
 		<FieldContext.Provider
 			value={{
-				initialValues: { foo: 'bar' },
 				loading: true,
 				onSubmit: mockOnSubmit
 			}}
@@ -50,10 +49,6 @@ describe('FormRadioGroup', () => {
 		expect(wrapper).toHaveLength(1)
 	})
 
-	it('correctly passes a default value from initial values if it exists', () => {
-		expect(wrapper.find(Controller).props().defaultValue).toEqual('bar')
-	})
-
 	it('should render a Radio Group component', () => {
 		const radioGroup = getRenderedCmp(wrapper)
 
@@ -72,7 +67,6 @@ describe('FormRadioGroup', () => {
 		wrapper = mount(
 			<FieldContext.Provider
 				value={{
-					initialValues: {},
 					loading: true,
 					onSubmit: mockOnSubmit
 				}}

diff --git a/src/components/Form/FormRadioGroup/index.tsx b/src/components/Form/FormRadioGroup/index.tsx
@@ -11,7 +11,6 @@ export interface FormRadioGroupProps
 		Omit<RadioGroupProps, 'onChange' | 'value'> {}
 
 const FormRadioGroup: FC<FormRadioGroupProps> = ({
-	defaultValue,
 	label,
 	labelSkeletonWidth,
 	name,
@@ -20,14 +19,10 @@ const FormRadioGroup: FC<FormRadioGroupProps> = ({
 	...rest
 }: FormRadioGroupProps) => {
 	const { control } = useFormContext()
-	const { initialValues, loading } = useContext<FieldContextProps>(
-		FieldContext
-	)
+	const { loading } = useContext<FieldContextProps>(FieldContext)
 
 	rules.required = true
 
-	const initialValue = (initialValues[name] as string) || defaultValue || ''
-
 	return (
 		<div>
 			{label && (
@@ -40,12 +35,10 @@ const FormRadioGroup: FC<FormRadioGroupProps> = ({
 			)}
 			<Controller
 				control={control}
-				defaultValue={initialValue}
 				name={name}
 				render={({ onChange, value }) => (
 					<RadioGroup
 						dataTag={getFormFieldDataTag(name)}
-						defaultValue={defaultValue}
 						loading={loading}
 						onChange={(
 							event: React.ChangeEvent<HTMLInputElement>

diff --git a/src/components/Form/FormSelect/FormSelect.test.tsx b/src/components/Form/FormSelect/FormSelect.test.tsx
@@ -24,7 +24,6 @@ beforeEach(() => {
 	wrapper = mount(
 		<FieldContext.Provider
 			value={{
-				initialValues: { foo: 'bar' },
 				loading: true,
 				onSubmit: mockOnSubmit
 			}}
@@ -43,10 +42,6 @@ describe('FormSelect', () => {
 		expect(wrapper).toHaveLength(1)
 	})
 
-	it('correctly passes a default value from initial values if it exists', () => {
-		expect(wrapper.find(Controller).props().defaultValue).toEqual('bar')
-	})
-
 	it('should render a Select component', () => {
 		const test = {
 			onChange: jest.fn(),
@@ -62,7 +57,6 @@ describe('FormSelect', () => {
 		wrapper = mount(
 			<FieldContext.Provider
 				value={{
-					initialValues: {},
 					loading: true,
 					onSubmit: mockOnSubmit
 				}}

diff --git a/src/components/Form/FormSelect/index.tsx b/src/components/Form/FormSelect/index.tsx
@@ -19,14 +19,10 @@ const FormSelect: FC<FormSelectProps> = ({
 	...rest
 }: FormSelectProps) => {
 	const { control } = useFormContext()
-	const { initialValues, loading } = useContext<FieldContextProps>(
-		FieldContext
-	)
+	const { loading } = useContext<FieldContextProps>(FieldContext)
 
 	rules.required = true
 
-	const defaultValue = (initialValues[name] as string) || ''
-
 	return (
 		<div>
 			{label && (
@@ -39,12 +35,10 @@ const FormSelect: FC<FormSelectProps> = ({
 			)}
 			<Controller
 				control={control}
-				defaultValue={defaultValue}
 				name={name}
 				render={({ onChange, value }) => (
 					<Select
 						dataTag={getFormFieldDataTag(name)}
-						defaultValue={defaultValue}
 						loading={loading}
 						onChange={onChange}
 						value={value}

diff --git a/src/components/Form/FormSubmitButton/FormSubmitButton.test.tsx b/src/components/Form/FormSubmitButton/FormSubmitButton.test.tsx
@@ -16,13 +16,13 @@ const getMockFormContext = (isDirty = true) =>
 			isDirty
 		},
 		getValues: jest.fn() as any,
-		handleSubmit: (onSubmit: any) => onSubmit()
+		handleSubmit: (onSubmit: any) => onSubmit(),
+		watch: jest.fn() as any
 	} as reactHookForm.UseFormMethods)
 
 const getWrapper = (additionalButtonProps = {}) => (
 	<FieldContext.Provider
 		value={{
-			initialValues: {},
 			loading: false,
 			onSubmit: (_: any) => mockOnSubmit as any
 		}}

diff --git a/src/components/Form/FormSubmitButton/index.tsx b/src/components/Form/FormSubmitButton/index.tsx
@@ -17,12 +17,12 @@ const FormSubmitButton: FC<FormButtonProps> = ({
 	isDisabled,
 	...rest
 }: FormButtonProps) => {
-	const { handleSubmit, formState, getValues } = useFormContext()
+	const { handleSubmit, formState, watch } = useFormContext()
 	const { loading, onSubmit } = useContext(FieldContext)
 	const { isDirty } = formState
 
 	const isButtonDisabled = () =>
-		isDisabled ? isDisabled(formState, getValues()) : !isDirty
+		isDisabled ? isDisabled(formState, watch()) : !isDirty
 
 	useShortcut({
 		additionalConditionalFn: () => !isButtonDisabled(),

diff --git a/src/components/Form/FormToggle/FormToggle.test.tsx b/src/components/Form/FormToggle/FormToggle.test.tsx
@@ -23,7 +23,6 @@ beforeEach(() => {
 	wrapper = mount(
 		<FieldContext.Provider
 			value={{
-				initialValues: { foo: true },
 				loading: true,
 				onSubmit: mockOnSubmit
 			}}
@@ -42,26 +41,6 @@ describe('FormToggle', () => {
 		expect(wrapper).toHaveLength(1)
 	})
 
-	it('correctly passes a default value from initial values if it exists', () => {
-		expect(wrapper.find(Controller).props().defaultValue).toEqual(true)
-	})
-
-	it('correctly passes a default value from initial values if defaultChecked is true', () => {
-		wrapper = mount(
-			<FieldContext.Provider
-				value={{
-					initialValues: {},
-					loading: true,
-					onSubmit: mockOnSubmit
-				}}
-			>
-				<FormToggle defaultChecked label='foo' name='foo' />
-			</FieldContext.Provider>
-		)
-
-		expect(wrapper.find(Controller).props().defaultValue).toEqual(true)
-	})
-
 	it('should render a Toggle component', () => {
 		const mockOnChange = jest.fn()
 		const test = {
@@ -86,7 +65,6 @@ describe('FormToggle', () => {
 		wrapper = mount(
 			<FieldContext.Provider
 				value={{
-					initialValues: {},
 					loading: true,
 					onSubmit: mockOnSubmit
 				}}
@@ -117,7 +95,6 @@ describe('FormToggle', () => {
 		wrapper = mount(
 			<FieldContext.Provider
 				value={{
-					initialValues: {},
 					loading: true,
 					onSubmit: mockOnSubmit
 				}}

diff --git a/src/components/Form/FormToggle/index.tsx b/src/components/Form/FormToggle/index.tsx
@@ -44,14 +44,10 @@ const FormToggle: FC<FormToggleProps> = ({
 	...rest
 }: FormToggleProps) => {
 	const { control } = useFormContext()
-	const { initialValues, loading } = useContext<FieldContextProps>(
-		FieldContext
-	)
+	const { loading } = useContext<FieldContextProps>(FieldContext)
 
 	const classes = useStyles({ fullWidth })
 
-	const defaultValue = (initialValues[name] as boolean) || defaultChecked
-
 	// TODO: add info tips
 	return (
 		<div className={classes.container}>
@@ -64,7 +60,6 @@ const FormToggle: FC<FormToggleProps> = ({
 			/>
 			<Controller
 				control={control}
-				defaultValue={defaultValue}
 				name={name}
 				render={({ onChange, value }) => (
 					<Toggle