Fix missing forwardRef in AppProxyForm and AppProxyLink

.changeset/fix-appproxy-react-router-forwardref.md

@@ -0,0 +1,6 @@
+---
+'@shopify/shopify-app-react-router': patch
+---
+
+`AppProxyLink` now uses `forwardRef`, allowing consumers to attach a ref to the
+underlying `<a>` element (e.g. `anchor.current.focus()`).

.changeset/fix-appproxy-remix-forwardref.md

@@ -0,0 +1,6 @@
+---
+'@shopify/shopify-app-remix': patch
+---
+
+`AppProxyForm` and `AppProxyLink` now use `forwardRef`, allowing consumers to
+attach a ref to the underlying DOM element (e.g. `form.current.submit()`).

packages/apps/shopify-app-react-router/src/react/components/AppProxyLink/AppProxyLink.tsx

@@ -1,4 +1,4 @@
-import {useContext} from 'react';
+import {forwardRef, useContext} from 'react';
 
 import {AppProxyProviderContext} from '../AppProxyProvider';
 
@@ -39,20 +39,22 @@ export interface AppProxyLinkProps extends React.DetailedHTMLProps<
  * }
  * ```
  */
-export function AppProxyLink(props: AppProxyLinkProps) {
-  const context = useContext(AppProxyProviderContext);
+export const AppProxyLink = forwardRef<HTMLAnchorElement, AppProxyLinkProps>(
+  function AppProxyLink(props, ref) {
+    const context = useContext(AppProxyProviderContext);
 
-  if (!context) {
-    throw new Error(
-      'AppProxyLink must be used within an AppProxyProvider component',
-    );
-  }
+    if (!context) {
+      throw new Error(
+        'AppProxyLink must be used within an AppProxyProvider component',
+      );
+    }
 
-  const {children, href, ...otherProps} = props;
+    const {children, href, ...otherProps} = props;
 
-  return (
-    <a href={context.formatUrl(href)} {...otherProps}>
-      {children}
-    </a>
-  );
-}
+    return (
+      <a href={context.formatUrl(href)} {...otherProps} ref={ref}>
+        {children}
+      </a>
+    );
+  },
+);

packages/apps/shopify-app-react-router/src/react/components/AppProxyLink/__tests__/AppProxyLink.test.tsx

@@ -1,3 +1,4 @@
+import {createRef} from 'react';
 import {mount} from '@shopify/react-testing';
 
 import '../../../__tests__/test-helper';
@@ -45,4 +46,21 @@ describe('<AppProxyLink />', () => {
     });
     expect(component).toContainReactHtml('Hello world');
   });
+
+  it('forwards ref to the underlying anchor element', () => {
+    // GIVEN
+    const ref = createRef<HTMLAnchorElement>();
+
+    // WHEN
+    mount(
+      <AppProxyProvider appUrl="http://my-app.example.io">
+        <AppProxyLink ref={ref} href="/my-action">
+          Hello world
+        </AppProxyLink>
+      </AppProxyProvider>,
+    );
+
+    // THEN
+    expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
+  });
 });

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

@@ -1,4 +1,4 @@
-import {useContext} from 'react';
+import {forwardRef, useContext} from 'react';
 import {Form, type FormProps} from '@remix-run/react';
 
 import {AppProxyProviderContext} from '../AppProxyProvider';
@@ -63,20 +63,22 @@ export interface AppProxyFormProps extends FormProps {
  * }
  * ```
  */
-export function AppProxyForm(props: AppProxyFormProps) {
-  const context = useContext(AppProxyProviderContext);
+export const AppProxyForm = forwardRef<HTMLFormElement, AppProxyFormProps>(
+  function AppProxyForm(props, ref) {
+    const context = useContext(AppProxyProviderContext);
 
-  if (!context) {
-    throw new Error(
-      'AppProxyForm must be used within an AppProxyProvider component',
-    );
-  }
+    if (!context) {
+      throw new Error(
+        'AppProxyForm must be used within an AppProxyProvider component',
+      );
+    }
 
-  const {children, action, ...otherProps} = props;
+    const {children, action, ...otherProps} = props;
 
-  return (
-    <Form action={context.formatUrl(action, false)} {...otherProps}>
-      {children}
-    </Form>
-  );
-}
+    return (
+      <Form action={context.formatUrl(action, false)} {...otherProps} ref={ref}>
+        {children}
+      </Form>
+    );
+  },
+);

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

@@ -1,3 +1,4 @@
+import {createRef} from 'react';
 import {mount} from '@shopify/react-testing';
 import {createRemixStub} from '@remix-run/testing';
 
@@ -52,4 +53,26 @@ describe('<AppProxyForm />', () => {
     expect(component).toContainReactComponent('form', {action: '/my-action/'});
     expect(component).toContainReactHtml('Hello world');
   });
+
+  it('forwards ref to the underlying form element', () => {
+    // GIVEN
+    const ref = createRef<HTMLFormElement>();
+
+    function MyComponent() {
+      return (
+        <AppProxyProvider appUrl="http://my-app.example.io">
+          <AppProxyForm ref={ref} action="/my-action">
+            Hello world
+          </AppProxyForm>
+        </AppProxyProvider>
+      );
+    }
+
+    // WHEN
+    const RemixStub = createRemixStub([{path: '/', Component: MyComponent}]);
+    mount(<RemixStub />);
+
+    // THEN
+    expect(ref.current).toBeInstanceOf(HTMLFormElement);
+  });
 });

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

@@ -1,4 +1,4 @@
-import {useContext} from 'react';
+import {forwardRef, useContext} from 'react';
 
 import {AppProxyProviderContext} from '../AppProxyProvider';
 
@@ -39,20 +39,22 @@ export interface AppProxyLinkProps extends React.DetailedHTMLProps<
  * }
  * ```
  */
-export function AppProxyLink(props: AppProxyLinkProps) {
-  const context = useContext(AppProxyProviderContext);
+export const AppProxyLink = forwardRef<HTMLAnchorElement, AppProxyLinkProps>(
+  function AppProxyLink(props, ref) {
+    const context = useContext(AppProxyProviderContext);
 
-  if (!context) {
-    throw new Error(
-      'AppProxyLink must be used within an AppProxyProvider component',
-    );
-  }
+    if (!context) {
+      throw new Error(
+        'AppProxyLink must be used within an AppProxyProvider component',
+      );
+    }
 
-  const {children, href, ...otherProps} = props;
+    const {children, href, ...otherProps} = props;
 
-  return (
-    <a href={context.formatUrl(href)} {...otherProps}>
-      {children}
-    </a>
-  );
-}
+    return (
+      <a href={context.formatUrl(href)} {...otherProps} ref={ref}>
+        {children}
+      </a>
+    );
+  },
+);

packages/apps/shopify-app-remix/src/react/components/AppProxyLink/__tests__/AppProxyLink.test.tsx

@@ -1,3 +1,4 @@
+import {createRef} from 'react';
 import {mount} from '@shopify/react-testing';
 
 import '../../../__tests__/test-helper';
@@ -45,4 +46,21 @@ describe('<AppProxyLink />', () => {
     });
     expect(component).toContainReactHtml('Hello world');
   });
+
+  it('forwards ref to the underlying anchor element', () => {
+    // GIVEN
+    const ref = createRef<HTMLAnchorElement>();
+
+    // WHEN
+    mount(
+      <AppProxyProvider appUrl="http://my-app.example.io">
+        <AppProxyLink ref={ref} href="/my-action">
+          Hello world
+        </AppProxyLink>
+      </AppProxyProvider>,
+    );
+
+    // THEN
+    expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
+  });
 });