fix: avoid triggering onClick on disabled links (#8828)

* fix: avoid triggering onClick on disabled links

* add link specific test and fix event order

* remove unneeded code

---------

Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: Robert Snow <[email protected]>

Author: lixiaoyan

packages/@react-aria/interactions/src/usePress.ts

@@ -298,10 +298,18 @@ export function usePress(props: PressHookProps): PressResult {
   });
 
   let triggerClick = useEffectEvent((e: RMouseEvent<FocusableElement>) => {
+    if (isDisabled) {
+      return;
+    }
+
     onClick?.(e);
   });
 
   let triggerSyntheticClick = useEffectEvent((e: KeyboardEvent | TouchEvent, target: FocusableElement) => {
+    if (isDisabled) {
+      return;
+    }
+
     // Some third-party libraries pass in onClick instead of onPress.
     // Create a fake mouse event and trigger onClick as well.
     // This matches the browser's native activation behavior for certain elements (e.g. button).
@@ -374,7 +382,7 @@ export function usePress(props: PressHookProps): PressResult {
           if (isDisabled) {
             e.preventDefault();
           }
-          
+
           // If triggered from a screen reader or by using element.click(),
           // trigger as if it were a keyboard click.
           if (!state.ignoreEmulatedMouseEvents && !state.isPressed && (state.pointerType === 'virtual' || isVirtualClick(e.nativeEvent))) {

packages/@react-aria/interactions/test/usePress.test.js

@@ -1049,7 +1049,7 @@ describe('usePress', function () {
       ]);
     });
 
-    it('should not fire press events for disabled elements', function () {
+    it('should not fire press/click events for disabled elements', function () {
       let events = [];
       let addEvent = (e) => events.push(e);
       let res = render(
@@ -1066,6 +1066,7 @@ describe('usePress', function () {
       let el = res.getByText('test');
       fireEvent(el, pointerEvent('pointerdown', {pointerId: 1, pointerType: 'mouse'}));
       fireEvent(el, pointerEvent('pointerup', {pointerId: 1, pointerType: 'mouse', clientX: 0, clientY: 0}));
+      fireEvent.click(el);
 
       expect(events).toEqual([]);
     });
@@ -4553,12 +4554,13 @@ describe('usePress', function () {
       ]);
     });
 
-    it('should not fire press events for disabled elements', function () {
-      const shadowRoot = setupShadowDOMTest({isDisabled: true});
+    it('should not fire press/click events for disabled elements', function () {
+      const shadowRoot = setupShadowDOMTest({isDisabled: true, onClick: e => addEvent({type: e.type, target: e.target})});
 
       const el = shadowRoot.getElementById('testElement');
       fireEvent(el, pointerEvent('pointerdown', {pointerId: 1, pointerType: 'mouse'}));
       fireEvent(el, pointerEvent('pointerup', {pointerId: 1, pointerType: 'mouse', clientX: 0, clientY: 0}));
+      fireEvent.click(el);
 
       expect(events).toEqual([]);
     });

packages/react-aria-components/test/Link.test.js

@@ -149,4 +149,20 @@ describe('Link', () => {
     await user.click(link);
     expect(navigate).toHaveBeenCalledWith('/foo', {foo: 'bar'});
   });
+
+  it('should not navigate if disabled', async () => {
+    let navigate = jest.fn();
+    let useHref = href => '/base' + href;
+    let onClick = jest.fn();
+    let {getByRole} = render(
+      <RouterProvider navigate={navigate} useHref={useHref}>
+        <Link isDisabled href="/foo" routerOptions={{foo: 'bar'}} onClick={onClick}>Test</Link>
+      </RouterProvider>
+    );
+    let link = getByRole('link');
+    expect(link).toHaveAttribute('href', '/base/foo');
+    await user.click(link);
+    expect(navigate).not.toHaveBeenCalled();
+    expect(onClick).not.toHaveBeenCalled();
+  });
 });