From 1b5cbb1fa87a2037e0e4dcfea45b46c1c9d6ee0b Mon Sep 17 00:00:00 2001
From: Ole Wieners <olewieners@yahoo.com>
Date: Thu, 16 Nov 2023 12:00:08 +0100
Subject: [PATCH] Forward `ExternalLink` component ref

This is necessary for upcoming changes in appkit, that
will allow users to navigate header menus using arrow
keys.
---
 frontend/src/relay/auth.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/relay/auth.tsx b/frontend/src/relay/auth.tsx
index daee4b12d..54add8c85 100644
--- a/frontend/src/relay/auth.tsx
+++ b/frontend/src/relay/auth.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { fetchQuery, graphql } from "react-relay";
 import { bug, match } from "@opencast/appkit";
 
@@ -41,13 +42,13 @@ export type ExternalLinkProps = PropsWithChildren<{
  * The redirection then takes you to the final destination.
  * If the setting is not enabled, this is just a normal link.
  */
-export const ExternalLink: React.FC<ExternalLinkProps> = ({
+export const ExternalLink = React.forwardRef<HTMLButtonElement, ExternalLinkProps>(({
     className,
     fallback,
     service,
     children,
     params,
-}) => {
+}, ref) => {
     const target = serviceUrl(service);
     for (const [key, value] of Object.entries(params)) {
         target.searchParams.append(key, value);
@@ -78,14 +79,14 @@ export const ExternalLink: React.FC<ExternalLinkProps> = ({
         <input type="hidden" name="jwt" />
 
         <button
-            className={className}
+            {...{ ref, className }}
             css={{
                 backgroundColor: "transparent",
                 border: "none",
             }}
         >{children}</button>
     </form>;
-};
+});
 
 /**
  * Internal helper function to fetch JWTs mainly to hide the ceremony involved