Adding a custom ContentBoxElements.Title to a default ActionContentBox alters input onBlur behavior?

Engines Form Engine
1

Hi all,

We’ve attempted to merge two separate nearly identical models and their form models. Both models have 3 read only fields and one editable required ‘name’ field. I added a ContentBoxElements.Title to an ActionContentBox within a FormEngineViews.FormEngine to display a separate title based on the ‘intention’ of activity i.e. create or rename.

Everything about this setup works fine, aside from the fact that the user now needs to click the submit button twice or deselect the ‘name’ input to get the form to submit. I’m assuming this is due to some change in the onBlur or onChange behavior. My colleague pointed out that the first click on the submit button triggers a “form-engine/event/VALUE_CHANGE” instead of the expected “form-engine/event/EVENT_BUTTON_TRIGGERED”.

Any ideas?

2

Hi Mitchell,

Can you please check how you create your custom components. The symptoms you describe can occur if your code keeps recreating new functions. React needs a stable (===) function across renders.

3

Hi @baschir-loud-bluff,

Thank you for taking a look. I’ve tried to review my component for something that might be creating new functions but I’ve tried to keep the component as simple as possible. I’ve based my component on these docs GetA12 Login. Here’s the simplest form of the component that still has the functionality we need but still has the issue with the input. I still can’t see what the issue is.

import { FormEngineViews } from "@com.mgmtp.a12.client/client-core/lib/extensions/form-engine";
import * as React from "react";
import { View } from "@com.mgmtp.a12.client/client-core/lib/core/view";
import { DefaultWidgetMap } from "@com.mgmtp.a12.formengine/formengine-core/lib/view";
import { ContentBoxElements } from "@com.mgmtp.a12.widgets/widgets-core";
import { localizer } from "tools/localizer-helper";
import { ActionContentboxProps } from "@com.mgmtp.a12.widgets/widgets-core/lib/contentbox/main/action-contentbox/action-contentbox.api";

export function AnleitungDialog(props: View) {
	const intention = props.activity.descriptor.intention ?? "";

	return (
		<FormEngineViews.FormEngine
			{...props}
			widgetMap={{
				...DefaultWidgetMap,
				ActionContentbox: (props: ActionContentboxProps) => {
					return (
						<DefaultWidgetMap.ActionContentbox
							{...props}
							headingElements={
								<ContentBoxElements.Title
									text={
										intention === "create"
											? localizer("anleitung.create.title")
											: localizer("anleitung.rename.title")
									}
								/>
							}
						/>
					);
				},
			}}
		/>
	);
}
4

This is the problematic (lambda) function. Please extract it to a named, static function, i.e. put it above / below AnleitungDialog. Ideally, also the whole widget map.

Pass intention in a React context.

You can see exactly what I described in the example that you have linked.

5

Thanks @baschir-loud-bluff, separating out the components and removing the lambda fixed it.