Fix refs on links and merge props (#4360)

Author: snowystinger

packages/@react-spectrum/link/src/Link.tsx

@@ -12,7 +12,7 @@
 
 import {classNames, getWrappedElement, useSlotProps, useStyleProps} from '@react-spectrum/utils';
 import {FocusRing} from '@react-aria/focus';
-import {mergeProps} from '@react-aria/utils';
+import {mergeProps, mergeRefs} from '@react-aria/utils';
 import React, {useRef} from 'react';
 import {SpectrumLinkProps} from '@react-types/link';
 import styles from '@adobe/spectrum-css-temp/components/link/vars.css';
@@ -47,14 +47,17 @@ export function Link(props: SpectrumLinkProps) {
     elementType: typeof children === 'string' ? 'span' : 'a'
   }, ref);
 
+  let wrappedChild = getWrappedElement(children);
+
   return (
     <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
       {React.cloneElement(
-        getWrappedElement(children),
+        wrappedChild,
         {
           ...styleProps,
-          ...mergeProps(linkProps, hoverProps),
-          ref,
+          ...mergeProps(wrappedChild.props, linkProps, hoverProps),
+          // @ts-ignore https://github.com/facebook/react/issues/8873
+          ref: wrappedChild.ref ? mergeRefs(ref, wrappedChild.ref) : ref,
           className: classNames(
             styles,
             'spectrum-Link',

packages/@react-spectrum/link/stories/Link.stories.tsx

@@ -74,6 +74,10 @@ export let WithChildren: LinkStory = {
   name: 'children: a'
 };
 
+export let BlockNavigation: LinkStory = {
+  args: {children: <a href="//example.com" target="_self" onClick={(e) => e.preventDefault()}>This is a React Spectrum Link</a>}
+};
+
 export let OnClick: LinkStory = {
   ...Default,
   args: {...Default.args},

packages/@react-spectrum/link/test/Link.test.js

@@ -73,14 +73,16 @@ describe('Link', function () {
   });
 
   it('Wraps custom child element', () => {
+    let ref = React.createRef();
     let {getByRole} = render(
       <Link UNSAFE_className="test-class" onPress={onPressSpy} >
-        <a href="#only-hash-in-jsdom" >Click me </a>
+        <a href="#only-hash-in-jsdom" ref={ref}>Click me </a>
       </Link>
     );
     let link = getByRole('link');
     expect(link).toBeDefined();
     expect(link.nodeName).toBe('A');
+    expect(ref.current).toBe(link);
     expect(link).toHaveAttribute('class', expect.stringContaining('test-class'));
     expect(link).toHaveAttribute('href', '#only-hash-in-jsdom');
     triggerPress(link);

packages/@react-spectrum/utils/src/getWrappedElement.tsx

@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import React, {ReactElement, ReactNode} from 'react';
+import React, {JSXElementConstructor, ReactElement, ReactNode} from 'react';
 
-export function getWrappedElement(children: string | ReactElement | ReactNode): ReactElement {
+export function getWrappedElement(children: string | ReactElement | ReactNode): ReactElement<any, JSXElementConstructor<any>> {
   let element;
   if (typeof children === 'string') {
     element = <span>{children}</span>;