diff --git a/.eslintrc.js b/.eslintrc.js
index 2559631af4..e6831de61c 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -12,6 +12,7 @@ module.exports = {
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
     'prettier',
+    'prettier/react',
     'prettier/@typescript-eslint',
     'plugin:prettier/recommended',
     'eslint-config-prettier',
diff --git a/src/__tests__/medications/requests/NewMedicationRequest.test.tsx b/src/__tests__/medications/requests/NewMedicationRequest.test.tsx
index 82057c4532..1082f3aa98 100644
--- a/src/__tests__/medications/requests/NewMedicationRequest.test.tsx
+++ b/src/__tests__/medications/requests/NewMedicationRequest.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, within } from '@testing-library/react'
+import { render, screen, waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { createMemoryHistory } from 'history'
 import React from 'react'
@@ -10,6 +10,8 @@ import thunk from 'redux-thunk'
 
 import NewMedicationRequest from '../../../medications/requests/NewMedicationRequest'
 import * as titleUtil from '../../../page-header/title/TitleContext'
+import PatientRepository from '../../../shared/db/PatientRepository'
+import Patient from '../../../shared/model/Patient'
 import { RootState } from '../../../shared/store'
 
 const mockStore = createMockStore<RootState, any>([thunk])
@@ -176,6 +178,15 @@ describe('New Medication Request', () => {
   describe('on save', () => {
     it('should save the medication request and navigate to "/medications/:id"', async () => {
       const { history } = setup()
+
+      jest.spyOn(PatientRepository, 'search').mockResolvedValue([
+        {
+          id: 'batman',
+          fullName: 'Bruce Wayne',
+          code: 'test code',
+        } as Patient,
+      ])
+
       const patient = screen.getByPlaceholderText(/medications\.medication\.patient/i)
       const medication = screen.getByLabelText(/medications\.medication\.medication/i)
       const medicationNotes = screen.getByRole('textbox', {
@@ -184,20 +195,35 @@ describe('New Medication Request', () => {
       const medStatus = within(screen.getByTestId('statusSelect')).getByRole('combobox')
       const medicationIntent = within(screen.getByTestId('intentSelect')).getByRole('combobox')
       const medicationPriority = within(screen.getByTestId('prioritySelect')).getByRole('combobox')
+      const quantityValue = screen.getByLabelText(/quantityValue/)
+      const quantityUnit = screen.getByLabelText(/quantityUnit/)
 
-      userEvent.type(patient, 'Bruce Wayne')
+      userEvent.type(patient, 'Bruce')
+      await selectEvent.select(patient, /Bruce/)
       userEvent.type(medication, 'Ibuprofen')
       userEvent.type(medicationNotes, 'Be warned he is Batman')
-      selectEvent.create(medStatus, 'active')
-      selectEvent.create(medicationIntent, 'order')
-      selectEvent.create(medicationPriority, 'urgent')
-
+      await selectEvent.select(medStatus, /active/)
+      await selectEvent.select(medicationIntent, /order/)
+      await selectEvent.select(medicationPriority, /urgent/)
+      userEvent.type(quantityUnit, '200')
+      userEvent.type(quantityValue, 'mg')
       userEvent.click(
         screen.getByRole('button', {
           name: /medications\.requests\.new/i,
         }),
       )
-      expect(history.location.pathname).toEqual('/medications/new')
-    })
+
+      await waitFor(() => {
+        expect(history.location.pathname).toMatch(
+          /\/medications\/[a-z0-9]{8}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{11}/,
+        )
+      })
+
+      expect(medStatus).toHaveValue('medications.status.active')
+      expect(medicationIntent).toHaveValue('medications.intent.order')
+      expect(medicationPriority).toHaveValue('medications.priority.urgent')
+      expect(quantityUnit).toHaveValue('200')
+      expect(quantityValue).toHaveValue('mg')
+    }, 20000)
   })
 })
diff --git a/src/medications/requests/NewMedicationRequest.tsx b/src/medications/requests/NewMedicationRequest.tsx
index d638dab748..be6ff5dad8 100644
--- a/src/medications/requests/NewMedicationRequest.tsx
+++ b/src/medications/requests/NewMedicationRequest.tsx
@@ -1,4 +1,5 @@
 import { Select, Typeahead, Label, Button, Alert, Column, Row } from '@hospitalrun/components'
+import { set } from 'lodash'
 import React, { useState, useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
@@ -97,11 +98,17 @@ const NewMedicationRequest = () => {
     }))
   }
 
-  const onTextInputChange = (text: string, name: string) => {
-    setNewMedicationRequest((previousNewMedicationRequest) => ({
-      ...previousNewMedicationRequest,
-      [name]: text,
-    }))
+  const onTextInputChange = (text: string, path: string | Array<string>) => {
+    setNewMedicationRequest((previousNewMedicationRequest) => {
+      const medicationRequest = {
+        ...previousNewMedicationRequest,
+      }
+
+      const propertyPath = typeof path === 'string' ? [path] : path
+      set(medicationRequest, propertyPath, text)
+
+      return medicationRequest
+    })
   }
 
   const onSave = async () => {
@@ -191,7 +198,9 @@ const NewMedicationRequest = () => {
               isEditable
               isRequired
               value={(newMedicationRequest.quantity.value as unknown) as string}
-              onChange={(event) => onTextInputChange(event.currentTarget.value, 'quantity.value')}
+              onChange={(event) =>
+                onTextInputChange(event.currentTarget.value, ['quantity', 'value'])
+              }
               isInvalid={!!error?.quantityValue}
               feedback={t(error?.quantityValue as string)}
             />
@@ -205,7 +214,9 @@ const NewMedicationRequest = () => {
               isRequired
               isEditable
               value={newMedicationRequest.quantity.unit}
-              onChange={(event) => onTextInputChange(event.currentTarget.value, 'quantity.unit')}
+              onChange={(event) =>
+                onTextInputChange(event.currentTarget.value, ['quantity', 'unit'])
+              }
               isInvalid={!!error?.quantityUnit}
               feedback={t(error?.quantityUnit as string)}
             />
diff --git a/src/scheduling/appointments/AppointmentDetailForm.tsx b/src/scheduling/appointments/AppointmentDetailForm.tsx
index 8f39883cf5..f24e9ea87c 100644
--- a/src/scheduling/appointments/AppointmentDetailForm.tsx
+++ b/src/scheduling/appointments/AppointmentDetailForm.tsx
@@ -52,9 +52,8 @@ const AppointmentDetailForm = (props: Props) => {
               disabled={!isEditable || patient !== undefined}
               value={patient?.fullName}
               placeholder={t('scheduling.appointment.patient')}
-              onChange={
-                (p: Patient[]) => onFieldChange && p[0] && onFieldChange('patient', p[0].id)
-                // eslint-disable-next-line react/jsx-curly-newline
+              onChange={(p: Patient[]) =>
+                onFieldChange && p[0] && onFieldChange('patient', p[0].id)
               }
               onSearch={async (query: string) => PatientRepository.search(query)}
               searchAccessor="fullName"
@@ -134,10 +133,8 @@ const AppointmentDetailForm = (props: Props) => {
               label={t('scheduling.appointment.reason')}
               value={appointment.reason}
               isEditable={isEditable}
-              onChange={
-                (event: React.ChangeEvent<HTMLTextAreaElement>) =>
-                  onFieldChange && onFieldChange('reason', event.currentTarget.value)
-                // eslint-disable-next-line react/jsx-curly-newline
+              onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) =>
+                onFieldChange && onFieldChange('reason', event.currentTarget.value)
               }
             />
           </div>