Use ie11 version of react-hook-form

frontend/src/components/DatePicker.js

@@ -14,7 +14,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { SingleDatePicker } from 'react-dates';
 import { OPEN_UP, OPEN_DOWN } from 'react-dates/constants';
-import { Controller } from 'react-hook-form';
+import { Controller } from 'react-hook-form/dist/index.ie11';
 import moment from 'moment';
 
 import './DatePicker.css';

frontend/src/components/FormItem.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form/dist/index.ie11';
 import { ErrorMessage as ReactHookFormError } from '@hookform/error-message';
 import {
   Label, FormGroup, ErrorMessage, Fieldset,

frontend/src/components/MultiSelect.js

@@ -23,7 +23,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Select, { components } from 'react-select';
-import { Controller } from 'react-hook-form';
+import { Controller } from 'react-hook-form/dist/index.ie11';
 
 import arrowBoth from '../images/arrow-both.svg';
 
@@ -56,9 +56,6 @@ const styles = {
     ...provided,
     borderColor: '#565c65',
     backgroundColor: 'white',
-    // IE 11 does not take minHeight into account when centering elements vertically.
-    // Setting heigth = minHeight forces the input element in ie 11 to be centered vertically
-    height: provided.minHeight,
     borderRadius: '0',
     '&:hover': {
       borderColor: '#565c65',

frontend/src/components/Navigator/__tests__/index.js

@@ -5,7 +5,7 @@ import {
   render, screen, waitFor, within,
 } from '@testing-library/react';
 
-import { useFormContext } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form/dist/index.ie11';
 import Navigator from '../index';
 import { NOT_STARTED } from '../constants';
 

frontend/src/components/Navigator/index.js

@@ -6,7 +6,7 @@
 */
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form/dist/index.ie11';
 import {
   Form,
   Button,

frontend/src/components/__tests__/DatePicker.js

@@ -4,7 +4,7 @@ import {
   render, screen, fireEvent, waitFor,
 } from '@testing-library/react';
 
-import { useForm } from 'react-hook-form';
+import { useForm } from 'react-hook-form/dist/index.ie11';
 import DatePicker from '../DatePicker';
 
 // react-dates when opening the calendar in these tests. For details see

frontend/src/components/__tests__/MutliSelect.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import selectEvent from 'react-select-event';
 import { act } from 'react-dom/test-utils';
-import { useForm } from 'react-hook-form';
+import { useForm } from 'react-hook-form/dist/index.ie11';
 import userEvent from '@testing-library/user-event';
 import { Label } from '@trussworks/react-uswds';
 

frontend/src/pages/ActivityReport/Pages/Review/Approver/Review.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form/dist/index.ie11';
 import _ from 'lodash';
 import {
   Dropdown, Form, Label, Fieldset, Textarea, Alert, Button,

frontend/src/pages/ActivityReport/Pages/Review/Approver/__tests__/index.js

@@ -3,7 +3,7 @@ import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form/dist/index.ie11';
 import Approver from '../index';
 import { REPORT_STATUSES } from '../../../../../../Constants';
 

frontend/src/pages/ActivityReport/Pages/Review/ReviewItem.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form/dist/index.ie11';
 
 const ReviewItem = ({ label, name, path }) => {
   const { watch } = useFormContext();

frontend/src/pages/ActivityReport/Pages/Review/ReviewPage.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { some } from 'lodash';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form/dist/index.ie11';
 
 import Section from './ReviewSection';
 import ReviewItem from './ReviewItem';

frontend/src/pages/ActivityReport/Pages/Review/Submitter/Draft.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form/dist/index.ie11';
 import {
   Dropdown, Form, Fieldset, Textarea, Button,
 } from '@trussworks/react-uswds';

frontend/src/pages/ActivityReport/Pages/Review/Submitter/__tests__/index.js

@@ -3,7 +3,7 @@ import '@testing-library/jest-dom';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { useForm, FormProvider } from 'react-hook-form';
+import { useForm, FormProvider } from 'react-hook-form/dist/index.ie11';
 
 import Submitter from '../index';
 import { REPORT_STATUSES } from '../../../../../../Constants';

frontend/src/pages/ActivityReport/Pages/Review/__tests__/ReviewPage.js

@@ -3,7 +3,7 @@ import React from 'react';
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import { BrowserRouter } from 'react-router-dom';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form/dist/index.ie11';
 import ReviewPage from '../ReviewPage';
 
 const sections = [

frontend/src/pages/ActivityReport/Pages/Review/__tests__/index.js

@@ -3,7 +3,7 @@ import '@testing-library/jest-dom';
 import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form/dist/index.ie11';
 
 import ReviewSubmit from '../index';
 import { REPORT_STATUSES } from '../../../../../Constants';

frontend/src/pages/ActivityReport/Pages/__tests__/goalsObjectives.js

@@ -3,7 +3,7 @@ import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import React from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form/dist/index.ie11';
 import join from 'url-join';
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';

frontend/src/pages/ActivityReport/Pages/__tests__/topicsResources.js

@@ -2,7 +2,7 @@
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form/dist/index.ie11';
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
 

frontend/src/pages/ActivityReport/Pages/activitySummary.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form/dist/index.ie11';
 import { isEmpty } from 'lodash';
 
 import {

frontend/src/pages/ActivityReport/Pages/components/GoalPicker.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import {
   Button, Label, TextInput,
 } from '@trussworks/react-uswds';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form/dist/index.ie11';
 import { v4 as uuidv4 } from 'uuid';
 
 import FormItem from '../../../../components/FormItem';

frontend/src/pages/ActivityReport/Pages/components/Objective.js

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form/dist/index.ie11';
 import {
   Tag, Label, Button, TextInput, Dropdown, Grid,
 } from '@trussworks/react-uswds';

frontend/src/pages/ActivityReport/Pages/components/ResourceSelector.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useFormContext, useFieldArray } from 'react-hook-form';
+import { useFormContext, useFieldArray } from 'react-hook-form/dist/index.ie11';
 
 import { Button, TextInput } from '@trussworks/react-uswds';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

frontend/src/pages/ActivityReport/Pages/components/__tests__/Goal.js

@@ -2,7 +2,7 @@
 import '@testing-library/jest-dom';
 import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form/dist/index.ie11';
 import userEvent from '@testing-library/user-event';
 
 import Goal from '../Goal';

frontend/src/pages/ActivityReport/Pages/components/__tests__/GoalPicker.js

@@ -3,7 +3,7 @@ import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form/dist/index.ie11';
 import selectEvent from 'react-select-event';
 
 import GoalPicker from '../GoalPicker';

frontend/src/pages/ActivityReport/Pages/components/__tests__/Objective.js

@@ -2,7 +2,7 @@ import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form/dist/index.ie11';
 import Objective from '../Objective';
 
 const RenderObjective = ({

frontend/src/pages/ActivityReport/Pages/components/__tests__/ResourceSelector.js

@@ -3,7 +3,7 @@ import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form/dist/index.ie11';
 
 import ResourceSelector from '../ResourceSelector';
 

frontend/src/pages/ActivityReport/Pages/goalsObjectives.js

@@ -5,7 +5,7 @@ import {
   Fieldset, Label, Textarea,
 } from '@trussworks/react-uswds';
 import useDeepCompareEffect from 'use-deep-compare-effect';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form/dist/index.ie11';
 import { isUndefined } from 'lodash';
 
 import ReviewItem from './Review/ReviewItem';

frontend/src/pages/ActivityReport/Pages/topicsResources.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Controller, useFormContext } from 'react-hook-form';
+import { Controller, useFormContext } from 'react-hook-form/dist/index.ie11';
 import { Helmet } from 'react-helmet';
 import {
   Fieldset, Label,