From 0eb328a5dbafdec1fe0d2a94c1d0b9d9e9b24227 Mon Sep 17 00:00:00 2001 From: Ryan Ling Date: Tue, 11 Jul 2023 13:33:04 +1000 Subject: [PATCH] Handle `onChange` type change in `react-hook-form@7.45` (#964) --- .changeset/great-actors-laugh.md | 7 +++++ .../NewPrivacyConsentForm.tsx | 6 ++-- .../NewQuestionForm/NewQuestionForm.tsx | 19 ++++++++++-- .../components/SelectOptions.tsx | 3 ++ fe/package.json | 4 +-- yarn.lock | 31 +++++++------------ 6 files changed, 43 insertions(+), 27 deletions(-) create mode 100644 .changeset/great-actors-laugh.md diff --git a/.changeset/great-actors-laugh.md b/.changeset/great-actors-laugh.md new file mode 100644 index 000000000..7f1b5ed14 --- /dev/null +++ b/.changeset/great-actors-laugh.md @@ -0,0 +1,7 @@ +--- +'wingman-fe': patch +--- + +QuestionnaireBuilder: Handle `onChange` type change in `react-hook-form@7.45` + +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/fe/lib/components/QuestionnaireBuilder/FormBuilder/components/NewPrivacyConsentForm/NewPrivacyConsentForm.tsx b/fe/lib/components/QuestionnaireBuilder/FormBuilder/components/NewPrivacyConsentForm/NewPrivacyConsentForm.tsx index cd960bbb2..a83fe2ef7 100644 --- a/fe/lib/components/QuestionnaireBuilder/FormBuilder/components/NewPrivacyConsentForm/NewPrivacyConsentForm.tsx +++ b/fe/lib/components/QuestionnaireBuilder/FormBuilder/components/NewPrivacyConsentForm/NewPrivacyConsentForm.tsx @@ -97,11 +97,12 @@ export default ({ ( field.onChange(event.currentTarget.value)} tone={errors.url ? 'critical' : undefined} - {...field} /> )} control={control} @@ -111,11 +112,12 @@ export default ({ ( field.onChange(event.currentTarget.value)} tone={errors.description ? 'critical' : undefined} - {...field} /> )} control={control} diff --git a/fe/lib/components/QuestionnaireBuilder/FormBuilder/components/NewQuestionForm/NewQuestionForm.tsx b/fe/lib/components/QuestionnaireBuilder/FormBuilder/components/NewQuestionForm/NewQuestionForm.tsx index 152f1a801..e27e233fa 100644 --- a/fe/lib/components/QuestionnaireBuilder/FormBuilder/components/NewQuestionForm/NewQuestionForm.tsx +++ b/fe/lib/components/QuestionnaireBuilder/FormBuilder/components/NewQuestionForm/NewQuestionForm.tsx @@ -64,6 +64,14 @@ const resolver = createResolver((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 ?? ''} > - - - + {Object.entries(QUESTION_TYPES).map(([value, label]) => ( + + ))} )} /> diff --git a/fe/lib/components/QuestionnaireBuilder/FormBuilder/components/NewQuestionForm/components/SelectOptions.tsx b/fe/lib/components/QuestionnaireBuilder/FormBuilder/components/NewQuestionForm/components/SelectOptions.tsx index a8a87fd6b..f1b181c66 100644 --- a/fe/lib/components/QuestionnaireBuilder/FormBuilder/components/NewQuestionForm/components/SelectOptions.tsx +++ b/fe/lib/components/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 index 1f5e1c656..b5d18bb95 100644 --- 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 index 700b03fc3..d12b87602 100644 --- 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/react@18.0.31": - 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/react@18.2.14", "@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"