FIO-9944: Fixes an issue where some form instances will not be destroyed

src/components/Form.tsx

@@ -59,7 +59,7 @@
 	onNextPage?: (page: number, submission: Submission) => void;
 	onCancelSubmit?: () => void;
 	onCancelComponent?: (component: Component) => void;
 	onChange?: (value: any, flags: any, modified: boolean) => void;
 	onCustomEvent?: (event: {
 		type: string;
 		component: Component;
@@ -69,17 +69,17 @@
 	onComponentChange?: (changed: {
 		instance: Webform;
 		component: Component;
 		value: any;
 		flags: any;
 	}) => void;
 	onSubmit?: (submission: Submission, saved?: boolean) => void;
 	onSubmitDone?: (submission: Submission) => void;
 	onSubmitError?: (error: EventError) => void;
 	onFormLoad?: (form: JSON) => void;
 	onError?: (error: EventError | false) => void;
 	onRender?: (param: any) => void;
 	onAttach?: (param: any) => void;
 	onBuild?: (param: any) => void;
 	onFocus?: (instance: Webform) => void;
 	onBlur?: (instance: Webform) => void;
 	onInitialized?: () => void;
@@ -91,7 +91,7 @@
 	onSubmissionDeleted?: (submission: Submission) => void;
 	onRequestDone?: () => void;
 	otherEvents?: {
 		[event: string]: (...args: any[]) => void;
 	};
 };
 
@@ -114,7 +114,7 @@
 		| 'formioform'
 		| 'Formio'
 	>,
 	...args: [string, ...any[]]
 ) => {
 	const [event, ...outputArgs] = args;
 	if (event.startsWith('formio.')) {
@@ -252,7 +252,8 @@
 export const Form = (props: FormProps) => {
 	const renderElement = useRef<HTMLDivElement | null>(null);
 	const currentFormJson = useRef<FormType | null>(null);
-	const { formConstructor, formSource, formReadyCallback } = getEffectiveProps(props);
+	const { formConstructor, formSource, formReadyCallback } =
+		getEffectiveProps(props);
 	const {
 		src,
 		form,
@@ -295,9 +296,10 @@
 				console.warn('Form source not found');
 				return;
 			}
-			currentFormJson.current = formSource && typeof formSource !== 'string'
-				? structuredClone(formSource)
-				: null;
+			currentFormJson.current =
+				formSource && typeof formSource !== 'string'
+					? structuredClone(formSource)
+					: null;
 			const instance = await createWebformInstance(
 				formConstructor,
 				currentFormJson.current || formSource,
@@ -319,7 +321,12 @@
 				if (formReadyCallback) {
 					formReadyCallback(instance);
 				}
-				setFormInstance(instance);
+				setFormInstance((prevInstance: any) => {
+					if (prevInstance) {
+						prevInstance.destroy(true);
+					}
+					return instance;
+				});
 			} else {
 				console.warn('Failed to create form instance');
 			}
@@ -338,7 +345,8 @@
 	useEffect(() => {
 		let onAnyHandler = null;
 		if (formInstance && Object.keys(handlers).length > 0) {
-			onAnyHandler = (...args: [string, ...any[]]) => onAnyEvent(handlers, ...args);
+			onAnyHandler = (...args: [string, ...any[]]) =>
+				onAnyEvent(handlers, ...args);
 			formInstance.onAny(onAnyHandler);
 		}