From 752913241de26f185cf50c8e1b0bb51841c65519 Mon Sep 17 00:00:00 2001
From: Kichiyaki <xyztojajestem@gmail.com>
Date: Thu, 10 Jun 2021 19:18:01 +0200
Subject: [PATCH] fix(QualificationsPage): can't type anything in select
 profession input

---
 .../components/FormDialog/FormDialog.tsx      | 33 ++++++++-----------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/src/features/QualificationsPage/components/FormDialog/FormDialog.tsx b/src/features/QualificationsPage/components/FormDialog/FormDialog.tsx
index 7492ba3..e12cb93 100644
--- a/src/features/QualificationsPage/components/FormDialog/FormDialog.tsx
+++ b/src/features/QualificationsPage/components/FormDialog/FormDialog.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useMemo } from 'react';
-import { Controller, useFieldArray, useForm } from 'react-hook-form';
-import { omit, pick } from 'lodash';
+import { useEffect, useMemo, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { pick } from 'lodash';
 import { polishPlurals } from 'polish-plurals';
 import useSuggestions from './FormDialog.useSuggestions';
 import { FORMULAS, MAX_NAME_LENGTH } from './constants';
@@ -35,15 +35,21 @@ export interface FormDialogProps extends Pick<DialogProps, 'open'> {
 
 const Form = ({ onClose, qualification, onSubmit }: FormDialogProps) => {
   const editMode = Boolean(qualification);
+  const [selectedProfessions, setSelectedProfessions] = useState<Profession[]>(
+    []
+  );
   const {
     register,
     handleSubmit,
     errors,
     control,
-    setValue,
     reset,
     formState: { isSubmitting },
-  } = useForm<Input>({});
+  } = useForm<Input>({
+    defaultValues: {
+      professions: [],
+    },
+  });
   const {
     isLoadingSuggestions,
     setSearch,
@@ -52,12 +58,7 @@ const Form = ({ onClose, qualification, onSubmit }: FormDialogProps) => {
   } = useSuggestions();
   const { professions, loading } = useProfessions(qualification?.id);
   const classes = useStyles();
-  const { fields: selectedProfessions } = useFieldArray<Profession, 'key'>({
-    control,
-    name: 'professions',
-    keyName: 'key',
-  });
-  const autocompleteOptions: typeof selectedProfessions = useMemo(() => {
+  const autocompleteOptions = useMemo(() => {
     return [
       ...suggestions.filter(
         profession =>
@@ -69,9 +70,7 @@ const Form = ({ onClose, qualification, onSubmit }: FormDialogProps) => {
     ];
   }, [suggestions, selectedProfessions]);
   useEffect(() => {
-    reset({
-      professions,
-    });
+    setSelectedProfessions(professions);
   }, [professions, reset]);
 
   const prepareDataBeforeSave = (data: Input): QualificationInput => {
@@ -171,17 +170,13 @@ const Form = ({ onClose, qualification, onSubmit }: FormDialogProps) => {
             loading={isLoadingSuggestions}
             value={selectedProfessions}
             onChange={(_, opts) => {
-              setValue(
-                'professions',
-                opts.map(profession => omit(profession, 'key'))
-              );
+              setSelectedProfessions(opts);
             }}
             getOptionSelected={(option, value) =>
               option && value && option.id === value.id
             }
             inputValue={search}
             onInputChange={(_, val, reason) => {
-              console.log(reason);
               setSearch(val);
             }}
             renderInput={params => (