fix(link): resolve issue where useHref is not working correctly (#5933)

* fix(link): correct props merge order in use-link to apply useHref

* chore(link): add changeset

* test(link): adjust href assertion to use getAttribute for compatibility

* fix(link): use routerLinkProps.href in handleLinkClick for consistency

* fix(link): process href with useHref before passing to useLinkProps

* test(link): comment out useHref provider test

* Revert "test(link): comment out useHref provider test"

This reverts commit de053f835fa57becf6e807a64c17339fc61d8689.

* Revert "fix(link): process href with useHref before passing to useLinkProps"

This reverts commit 81e5f7b8d1ea7002b9718cf521b5c6f2af79ac42.

* fix(provider): add `useHref` to provider context and integrate with `useLink`

* test(link): comment out useHref provider test

* fix(link): correct href handling in link component and update tests

* fix(link): simplify props handling by removing resolvedProps logic and reorder mergeProps usage

* fix(provider): remove `useHref` from provider context and related logic

* refactor(link): add spacing

* chore(changeset): add issue numbers

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>
This commit is contained in:
Hayato Hasegawa 2025-11-28 19:34:17 +09:00 committed by GitHub
parent 0825f88cd2
commit 66ef76e823
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 20 additions and 1 deletions

View File

@ -0,0 +1,5 @@
---
"@heroui/link": patch
---
Fix an issue where the useHref was not being applied correctly (#5925, #5431, #5600)

View File

@ -3,6 +3,7 @@ import type {UserEvent} from "@testing-library/user-event";
import * as React from "react";
import {render} from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import {HeroUIProvider} from "@heroui/system";
import {Link} from "../src";
@ -84,4 +85,17 @@ describe("Link", () => {
expect(container.querySelector("button")?.getAttribute("role")).toBe("link");
});
it("should apply useHref from provider", () => {
const useHref = (href: string) => `/example${href}`;
const {getByRole} = render(
<HeroUIProvider navigate={jest.fn()} useHref={useHref}>
<Link href="/test">Test Link</Link>
</HeroUIProvider>,
);
const link = getByRole("link");
expect(link.getAttribute("href")).toBe("/example/test");
});
});

View File

@ -110,7 +110,7 @@ export function useLink(originalProps: UseLinkProps) {
"data-focus": dataAttr(isFocused),
"data-disabled": dataAttr(originalProps.isDisabled),
"data-focus-visible": dataAttr(isFocusVisible),
...mergeProps(focusProps, linkProps, otherProps),
...mergeProps(focusProps, otherProps, linkProps),
};
}, [styles, isFocused, isFocusVisible, focusProps, linkProps, otherProps]);