fix: Fix ref issues with Link component

ExpediaGroup · Feb 24, 2022 · 8f421d0 · 8f421d0
1 parent 4fb27b7
commit 8f421d0
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/packages/frontend/src/components/link/link.tsx b/packages/frontend/src/components/link/link.tsx
@@ -15,13 +15,19 @@
  */
 
 import { Link as ChakraLink, LinkProps as ChakraLinkProps } from '@chakra-ui/react';
+import React, { forwardRef } from 'react';
 import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
 
 /**
  * Custom link component that composes Chakra-UI presentation with React Router functionality
  *
  * @param props RouterLinkProps
  */
-export const Link = ({ underline = true, ...props }: { underline?: boolean } & RouterLinkProps & ChakraLinkProps) => (
-  <ChakraLink as={RouterLink} {...(!underline ? { _hover: { textDecoration: 'none' } } : {})} {...props} />
+export const Link = forwardRef(
+  (
+    { underline = true, ...props }: { underline?: boolean } & RouterLinkProps & ChakraLinkProps,
+    ref: React.Ref<any>
+  ) => (
+    <ChakraLink ref={ref} as={RouterLink} {...(!underline ? { _hover: { textDecoration: 'none' } } : {})} {...props} />
+  )
 );