AppProxyForm does not handle ref attribute

[ngbrown]

Issue summary

Before opening this issue, I have:

• Upgraded to the latest version of the relevant packages
  • @shopify/shopify-app-remix package and version: 3.3.2
  • Node version: v20.17.0
  • Operating system: Windows 10
• Set { logger: { level: LogSeverity.Debug } } in my configuration, when applicable
• Found a reliable way to reproduce the problem that indicates it's a problem with the package
• Looked for similar issues in this repository
• Checked that this isn't an issue with a Shopify API
  • If it is, please create a post in the Shopify community forums or report it to Shopify Partner Support

The documentation says the <AppProxyForm/> component can be used in place of Remix's <Form/> but it does not correctly handle setting the ref attribute.

Expected behavior

What do you think should happen?

Accept the ref attribute and enable calling form functions such as form.current.submit().

Actual behavior

What actually happens?

Type '{ children: Element; ref: RefObject; method: "POST"; onSubmit: (ev: FormEvent) => void; onReset: () => void; }' is not assignable to type 'IntrinsicAttributes & AppProxyFormProps'.
Property 'ref' does not exist on type 'IntrinsicAttributes & AppProxyFormProps'.ts(2322)

The component does not use forwardRef as it should.

shopify-app-js/packages/apps/shopify-app-remix/src/react/components/AppProxyForm/AppProxyForm.tsx

Lines 63 to 79 in 08627d8

	export function AppProxyForm(props: AppProxyFormProps) {
	const context = useContext(AppProxyProviderContext);
	if (!context) {
	throw new Error(
	'AppProxyForm must be used within an AppProxyProvider component',
	);
	}
	const {children, action, ...otherProps} = props;
	return (
	<Form action={context.formatUrl(action, false)} {...otherProps}>
	{children}
	</Form>
	);
	}

Line 63 should be:

export const AppProxyForm = forwardRef(function AppProxyForm(props: AppProxyFormProps, ref?: LegacyRef<HTMLFormElement>) {

Line 75 should be:

<Form action={context.formatUrl(action, false)} {...otherProps} ref={ref}>

Steps to reproduce the problem

const form = useRef<HTMLFormElement>(null);
return (
  <AppProxyForm ref={form} action="/app/settings">
  </AppProxyForm>
);

Debug logs

N/A

[lizkenyon]

Hi there 👋

Thanks for flagging, and taking a detailed look into the problem.
If you would like to feel free to put up a PR for this issue, and the team will prioritize reviewing it. Otherwise I will add this ticket to the backlog of work for us to resolve.

Thanks again!

[github-actions]

We're labeling this issue as stale because there hasn't been any activity on it for 60 days. While the issue will stay open and we hope to resolve it, this helps us prioritize community requests.

You can add a comment to remove the label if it's still relevant, and we can re-evaluate it.