diff --git a/frontend/src/js/external-forms/form/fields/DisclosureListField.tsx b/frontend/src/js/external-forms/form/fields/DisclosureListField.tsx index d8b60729da..591ff3c3bd 100644 --- a/frontend/src/js/external-forms/form/fields/DisclosureListField.tsx +++ b/frontend/src/js/external-forms/form/fields/DisclosureListField.tsx @@ -11,6 +11,7 @@ import tw from "tailwind-styled-components"; import IconButton from "../../../button/IconButton"; import { TransparentButton } from "../../../button/TransparentButton"; import { exists } from "../../../common/helpers/exists"; +import { usePrevious } from "../../../common/helpers/usePrevious"; import FaIcon from "../../../icon/FaIcon"; import InfoTooltip from "../../../tooltip/InfoTooltip"; import { DisclosureListField as DisclosureListFieldT } from "../../config-types"; @@ -142,11 +143,6 @@ export const DisclosureListField = ({ name: field.name, }); - const { isOpen, toggleOpen } = useOpenState({ - onlyOneOpenAtATime: field.onlyOneOpenAtATime, - defaultOpen: field.defaultOpen ? fields[0]?.id : undefined, - }); - useEffect( function applyDefaultValue() { if ( @@ -165,6 +161,51 @@ export const DisclosureListField = ({ [fields.length, replace, defaultValue, commonProps], ); + const prevFieldsLength = usePrevious(fields.length); + + const { isOpen, toggleOpen } = useOpenState({ + onlyOneOpenAtATime: field.onlyOneOpenAtATime, + defaultOpen: field.defaultOpen ? fields[0]?.id : undefined, + }); + + useEffect( + function openFirstFieldIfNecessary() { + if (prevFieldsLength === 0 && fields.length > 0 && field.defaultOpen) { + const id = fields[0]?.id; + if (id && !isOpen[id]) { + toggleOpen(id); + } + } + }, + [prevFieldsLength, fields, toggleOpen, isOpen, field.defaultOpen], + ); + + useEffect( + function openLastFieldAfterAppending() { + if ( + exists(prevFieldsLength) && + prevFieldsLength > 0 && + prevFieldsLength < fields.length && + field.defaultOpen + ) { + commonProps.trigger(); + + const id = fields[fields.length - 1]?.id; + if (id && !isOpen[id]) { + toggleOpen(id); + } + } + }, + [ + prevFieldsLength, + fields, + isOpen, + toggleOpen, + field.defaultOpen, + commonProps, + ], + ); + if (field.fields.length === 0) return null; const { locale } = commonProps; @@ -187,7 +228,7 @@ export const DisclosureListField = ({ + onClick={() => { append( Object.fromEntries( field.fields.filter(isFormFieldWithValue).map((f) => [ @@ -199,8 +240,8 @@ export const DisclosureListField = ({ }), ]), ), - ) - } + ); + }} > {field.createNewLabel ? field.createNewLabel[locale] : undefined} diff --git a/frontend/src/js/external-forms/form/fields/TabsField.tsx b/frontend/src/js/external-forms/form/fields/TabsField.tsx index 48b6d64002..d2328e4d31 100644 --- a/frontend/src/js/external-forms/form/fields/TabsField.tsx +++ b/frontend/src/js/external-forms/form/fields/TabsField.tsx @@ -45,9 +45,10 @@ export const TabsField = ({ <> - commonProps.setValue(field.name, tab, setValueConfig) - } + onSelectTab={(tab) => { + commonProps.setValue(field.name, tab, setValueConfig); + commonProps.trigger(); + }} options={field.tabs.map((tab) => ({ label: () => tab.title[commonProps.locale] || "", value: tab.name,