Skip to content

Commit e81b5b4

Browse files
committed
Revert "Remove link support from useButton"
97ea777
1 parent 79fd604 commit e81b5b4

File tree

1 file changed

+10
-5
lines changed

1 file changed

+10
-5
lines changed

packages/react/src/use-button/useButton.ts

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@ export function useButton(parameters: useButton.Parameters = {}): useButton.Retu
2121

2222
const isCompositeItem = useCompositeRootContext(true) !== undefined;
2323

24+
const isValidLink = useStableCallback(() => {
25+
const element = elementRef.current;
26+
return Boolean(element?.tagName === 'A' && (element as HTMLAnchorElement)?.href);
27+
});
28+
2429
const { props: focusableWhenDisabledProps } = useFocusableWhenDisabled({
2530
focusableWhenDisabled,
2631
disabled,
@@ -37,7 +42,6 @@ export function useButton(parameters: useButton.Parameters = {}): useButton.Retu
3742
}
3843

3944
const isButtonTag = elementRef.current.tagName === 'BUTTON';
40-
const isAnchorTag = elementRef.current.tagName === 'A';
4145

4246
if (isNativeButton) {
4347
if (!isButtonTag) {
@@ -49,8 +53,6 @@ export function useButton(parameters: useButton.Parameters = {}): useButton.Retu
4953
error(
5054
'A component that acts as a button was rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is not a real <button>, or set the `nativeButton` prop on the component to `true`.',
5155
);
52-
} else if (isAnchorTag) {
53-
error('A component that acts as a button was rendered as an <a>, which is unsupported.');
5456
}
5557
}, [isNativeButton]);
5658
}
@@ -117,7 +119,10 @@ export function useButton(parameters: useButton.Parameters = {}): useButton.Retu
117119
}
118120

119121
const shouldClick =
120-
event.target === event.currentTarget && !isNativeButton && !disabled;
122+
event.target === event.currentTarget &&
123+
!isNativeButton &&
124+
!isValidLink() &&
125+
!disabled;
121126
const isEnterKey = event.key === 'Enter';
122127
const isSpaceKey = event.key === ' ';
123128

@@ -167,7 +172,7 @@ export function useButton(parameters: useButton.Parameters = {}): useButton.Retu
167172
otherExternalProps,
168173
);
169174
},
170-
[disabled, focusableWhenDisabledProps, isNativeButton],
175+
[disabled, focusableWhenDisabledProps, isNativeButton, isValidLink],
171176
);
172177

173178
const buttonRef = useStableCallback((element: HTMLElement | null) => {

0 commit comments

Comments
 (0)