Handle onChange type change in [email protected] (#964)

seek-oss · Jul 11, 2023 · 0eb328a · 0eb328a
1 parent 914a11c
commit 0eb328a
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 27 deletions.
diff --git a/.changeset/great-actors-laugh.md b/.changeset/great-actors-laugh.md
@@ -0,0 +1,7 @@
+---
+'wingman-fe': patch
+---
+
+QuestionnaireBuilder: Handle `onChange` type change in `[email protected]`
+
+See [react-hook-form/react-hook-form#10342](https://github.com/react-hook-form/react-hook-form/pull/10342) for more information.
diff --git a/...estionnaireBuilder/FormBuilder/components/NewPrivacyConsentForm/NewPrivacyConsentForm.tsx b/...estionnaireBuilder/FormBuilder/components/NewPrivacyConsentForm/NewPrivacyConsentForm.tsx
@@ -97,11 +97,12 @@ export default ({
         <Controller
           render={({ field }) => (
             <TextField
+              {...field}
               id="url"
               label="URL"
               message={errors.url?.message}
+              onChange={(event) => field.onChange(event.currentTarget.value)}
               tone={errors.url ? 'critical' : undefined}
-              {...field}
             />
           )}
           control={control}
@@ -111,11 +112,12 @@ export default ({
         <Controller
           render={({ field }) => (
             <TextField
+              {...field}
               id="description"
               label="Description"
               message={errors.description?.message}
+              onChange={(event) => field.onChange(event.currentTarget.value)}
               tone={errors.description ? 'critical' : undefined}
-              {...field}
             />
           )}
           control={control}

diff --git a/...omponents/QuestionnaireBuilder/FormBuilder/components/NewQuestionForm/NewQuestionForm.tsx b/...omponents/QuestionnaireBuilder/FormBuilder/components/NewQuestionForm/NewQuestionForm.tsx
@@ -64,6 +64,14 @@ const resolver = createResolver<FormValues>((values, errors) => {
   }
 });
 
+const QUESTION_TYPES = {
+  FreeText: 'Free Text',
+  SingleSelect: 'Single Select',
+  MultiSelect: 'Multi Select',
+};
+
+type QuestionTypeValue = keyof typeof QUESTION_TYPES;
+
 export default ({ hideForm, initialValues }: NewQuestionFormProps) => {
   const {
     clearErrors,
@@ -146,13 +154,18 @@ export default ({ hideForm, initialValues }: NewQuestionFormProps) => {
               id={field.name}
               label="Type"
               message={errors.questionType?.message}
+              onChange={(event) =>
+                field.onChange(event.currentTarget.value as QuestionTypeValue)
+              }
               placeholder="Select a question type"
               tone={errors.questionType ? 'critical' : undefined}
               value={questionTypeValue ?? ''}
             >
-              <option value="FreeText">Free Text</option>
-              <option value="SingleSelect">Single Select</option>
-              <option value="MultiSelect">Multi Select</option>
+              {Object.entries(QUESTION_TYPES).map(([value, label]) => (
+                <option key={value} value={value}>
+                  {label}
+                </option>
+              ))}
             </Dropdown>
           )}
         />

diff --git a/.../QuestionnaireBuilder/FormBuilder/components/NewQuestionForm/components/SelectOptions.tsx b/.../QuestionnaireBuilder/FormBuilder/components/NewQuestionForm/components/SelectOptions.tsx
@@ -121,6 +121,9 @@ export default ({ options, setOptionList }: SelectOptionsProps) => {
                     {...field}
                     id="questionnaireBuilderAddOption"
                     label="Options"
+                    onChange={(event) =>
+                      field.onChange(event.currentTarget.value)
+                    }
                     onClear={() => setValue('option', '')}
                     ref={optionInputRef}
                     tone={errors.option ? 'critical' : undefined}

diff --git a/fe/package.json b/fe/package.json
@@ -20,8 +20,8 @@
     "@testing-library/react": "14.0.0",
     "@types/content-disposition": "0.5.5",
     "@types/faker": "5.5.9",
-    "@types/react": "18.0.31",
-    "@types/react-dom": "18.0.11",
+    "@types/react": "18.2.14",
+    "@types/react-dom": "18.2.6",
     "@vanilla-extract/css": "1.12.0",
     "@vanilla-extract/css-utils": "0.1.3",
     "braid-design-system": "32.8.0",

diff --git a/yarn.lock b/yarn.lock
@@ -5104,26 +5104,17 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react-dom@18.0.11", "@types/react-dom@^18.0.0":
-  version "18.0.11"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.11.tgz#321351c1459bc9ca3d216aefc8a167beec334e33"
-  integrity sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==
+"@types/react-dom@18.2.6", "@types/react-dom@^18.0.0":
+  version "18.2.6"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.6.tgz#ad621fa71a8db29af7c31b41b2ea3d8a6f4144d1"
+  integrity sha512-2et4PDvg6PVCyS7fuTc4gPoksV58bW0RwSxWKcPRcHZf0PRUGq03TKcD/rUHe3azfV6/5/biUBJw+HhCQjaP0A==
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@>=16":
-  version "18.2.12"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.12.tgz#95d584338610b78bb9ba0415e3180fb03debdf97"
-  integrity sha512-ndmBMLCgn38v3SntMeoJaIrO6tGHYKMEBohCUmw8HoLLQdRMOIGXfeYaBTLe2lsFaSB3MOK1VXscYFnmLtTSmw==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/[email protected]":
-  version "18.0.31"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.31.tgz#a69ef8dd7bfa849734d258c793a8fe343a338205"
-  integrity sha512-EEG67of7DsvRDU6BLLI0p+k1GojDLz9+lZsnCpCRTa/lOokvyPBvp8S5x+A24hME3yyQuIipcP70KJ6H7Qupww==
+"@types/react@*", "@types/[email protected]", "@types/react@>=16":
+  version "18.2.14"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.14.tgz#fa7a6fecf1ce35ca94e74874f70c56ce88f7a127"
+  integrity sha512-A0zjq+QN/O0Kpe30hA1GidzyFjatVvrpIvWLxD+xv67Vt91TWWgco9IvrJBkeyHm1trGaFS/FSGqPlhyeZRm0g==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -14672,9 +14663,9 @@ react-focus-lock@^2.9.1:
     use-sidecar "^1.1.2"
 
 react-hook-form@^7.0.0:
-  version "7.43.8"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.43.8.tgz#189fe4fb31e15c280b529cc3041249ed12108d75"
-  integrity sha512-BQm+Ge5KjTk1EchDBRhdP8Pkb7MArO2jFF+UWYr3rtvh6197khi22uloLqlWeuY02ItlCzPunPsFt1/q9wQKnw==
+  version "7.45.1"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.45.1.tgz#e352c7f4dbc7540f0756abbb4dcfd1122fecc9bb"
+  integrity sha512-6dWoFJwycbuFfw/iKMcl+RdAOAOHDiF11KWYhNDRN/OkUt+Di5qsZHwA0OwsVnu9y135gkHpTw9DJA+WzCeR9w==
 
 react-inspector@^6.0.0:
   version "6.0.2"