diff --git a/libs/application/templates/new-primary-school/src/forms/NewPrimarySchoolForm/primarySchoolSection/newSchoolSubSection.ts b/libs/application/templates/new-primary-school/src/forms/NewPrimarySchoolForm/primarySchoolSection/newSchoolSubSection.ts index 3b602a7dc691..bd1fa86b8a5c 100644 --- a/libs/application/templates/new-primary-school/src/forms/NewPrimarySchoolForm/primarySchoolSection/newSchoolSubSection.ts +++ b/libs/application/templates/new-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/libs/application/templates/reference-template/src/forms/exampleForm/simpleInputsSection/asyncSelectSubsection.ts b/libs/application/templates/reference-template/src/forms/exampleForm/simpleInputsSection/asyncSelectSubsection.ts index 6b0c6509addd..ee62db6becb6 100644 --- a/libs/application/templates/reference-template/src/forms/exampleForm/simpleInputsSection/asyncSelectSubsection.ts +++ b/libs/application/templates/reference-template/src/forms/exampleForm/simpleInputsSection/asyncSelectSubsection.ts @@ -78,7 +78,7 @@ export const asyncSelectSubsection = buildSubSection({ id: 'asyncSelectDescription', title: 'Value dependent async select', description: - 'Sometimes the options you might want to present to a user must depend on the value of another async select field. Value dependent async select offers just that.', + 'Sometimes the options you might want to present to a user must depend on the value of another async select field. Value dependent async select offers just that. Multi select fields are also supported and selected values will be passed as an array.', titleVariant: 'h3', marginBottom: [2], }), @@ -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({ diff --git a/libs/application/types/src/lib/Fields.ts b/libs/application/types/src/lib/Fields.ts index 28667491c0ba..7decd6d4b1bd 100644 --- 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 - selectedValue?: string[] + selectedValue?: string | 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 index 0288ef4ba427..e8676da8c7d0 100644 --- 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> = ({ const [lastUpdateOnSelectValue, setLastUpdateOnSelectValue] = useState('') - const watchUpdateOnSelect = updateOnSelect ? watch(updateOnSelect) : [] - const load = async (selectedValue?: string[]) => { + const watchUpdateOnSelect = updateOnSelect ? watch(updateOnSelect) : '' + const load = async (selectedValue?: string | string[]) => { try { setHasLoadingError(false) const loaded = await loadOptions({ @@ -68,20 +68,16 @@ export const AsyncSelectFormField: FC> = ({ } 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() }