fix(application-system): Fix typing for updateOnSelect

island-is · Jan 27, 2025 · eb3283f · eb3283f
1 parent f4563ac
commit eb3283f
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 15 deletions.
diff --git a/...primary-school/src/forms/NewPrimarySchoolForm/primarySchoolSection/newSchoolSubSection.ts b/...primary-school/src/forms/NewPrimarySchoolForm/primarySchoolSection/newSchoolSubSection.ts
@@ -46,7 +46,7 @@ export const newSchoolSubSection = buildSubSection({
           placeholder: newPrimarySchoolMessages.shared.schoolPlaceholder,
           loadingError: coreErrorMessages.failedDataProvider,
           dataTestId: 'new-school-school',
-          updateOnSelect: ['newSchool.municipality'],
+          updateOnSelect: 'newSchool.municipality',
           loadOptions: async ({ application, apolloClient, selectedValue }) => {
             const { schoolMunicipality } = getApplicationAnswers(
               application.answers,

diff --git a/...tes/reference-template/src/forms/exampleForm/simpleInputsSection/asyncSelectSubsection.ts b/...tes/reference-template/src/forms/exampleForm/simpleInputsSection/asyncSelectSubsection.ts
@@ -108,7 +108,7 @@ export const asyncSelectSubsection = buildSubSection({
           title: 'Dependent Async Select',
           placeholder: 'Will re-fetch when the primary async select is changed',
           loadingError: 'Loading error',
-          updateOnSelect: ['primaryAsyncSelect'],
+          updateOnSelect: 'primaryAsyncSelect',
           loadOptions: async ({ apolloClient, selectedValue }) => {
             const { data } =
               await apolloClient.query<FriggSchoolsByMunicipality>({

diff --git a/libs/application/types/src/lib/Fields.ts b/libs/application/types/src/lib/Fields.ts
@@ -53,7 +53,7 @@ export type Context = {
 export type AsyncSelectContext = {
   application: Application
   apolloClient: ApolloClient<object>
-  selectedValue?: string[]
+  selectedValue?: string
 }
 
 export type TagVariant =
@@ -396,7 +396,7 @@ export interface AsyncSelectField extends InputField {
   backgroundColor?: InputBackgroundColor
   isSearchable?: boolean
   isMulti?: boolean
-  updateOnSelect?: string[]
+  updateOnSelect?: string
 }
 
 export interface TextField extends InputField {

diff --git a/libs/application/ui-fields/src/lib/AsyncSelectFormField/AsyncSelectFormField.tsx b/libs/application/ui-fields/src/lib/AsyncSelectFormField/AsyncSelectFormField.tsx
@@ -52,8 +52,8 @@ export const AsyncSelectFormField: FC<React.PropsWithChildren<Props>> = ({
   const [lastUpdateOnSelectValue, setLastUpdateOnSelectValue] =
     useState<string>('')
 
-  const watchUpdateOnSelect = updateOnSelect ? watch(updateOnSelect) : []
-  const load = async (selectedValue?: string[]) => {
+  const watchUpdateOnSelect = updateOnSelect ? watch(updateOnSelect) : ''
+  const load = async (selectedValue?: string) => {
     try {
       setHasLoadingError(false)
       const loaded = await loadOptions({
@@ -68,20 +68,16 @@ export const AsyncSelectFormField: FC<React.PropsWithChildren<Props>> = ({
   }
 
   useEffect(() => {
-    if (
-      watchUpdateOnSelect.length > 0 &&
-      watchUpdateOnSelect[0] !== undefined
-    ) {
-      setLastUpdateOnSelectValue(watchUpdateOnSelect[0])
+    if (watchUpdateOnSelect) {
+      setLastUpdateOnSelectValue(watchUpdateOnSelect)
     }
   }, [watchUpdateOnSelect])
 
   useEffect(() => {
     if (updateOnSelect) {
-      const [selectedValue] = watchUpdateOnSelect
-      if (selectedValue !== undefined) {
-        load(selectedValue)
-        setLastUpdateOnSelectValue(selectedValue)
+      if (watchUpdateOnSelect !== undefined) {
+        load(watchUpdateOnSelect)
+        setLastUpdateOnSelectValue(watchUpdateOnSelect)
       } else {
         load()
       }