Got "onClick is deprecated, please use onPress" while no onClick is used

[wingkwong]

Discussed in #3193

^{Originally posted by bllakcn June 6, 2024}
My first time using the as prop to render a Link component as a Button.
I see this in my console
onClick is deprecated, please use onPress from useLink.

Is there anything I did wrong on my side?

<Button
  as={Link}
  color='primary'
  onPress={doSomething}
  href={/}
  >
  Go somewhere
</Button>

[linear]

ENG-970 Got "onClick is deprecated, please use onPress" while no `onClick` is used

[wingkwong]

The error was thrown from useLink.ts from react-specturm.

onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
  pressProps.onClick?.(e);
  if (deprecatedOnClick) {
    deprecatedOnClick(e);
    console.warn('onClick is deprecated, please use onPress');
  }

[chirokas]

@wingkwong, I agree.

We have no warning here.

https://github.com/nextui-org/nextui/blob/2069a7a9d00291266fef763c6817b3bdd3ed4707/packages/hooks/use-aria-button/src/index.ts#L133-L135

[wingkwong]

@chirokas the issue here is that onPress is already used, but the warning is still asking you to use onPress.

[chirokas]

@wingkwong, onClick is passed to Link in getButtonProps.

https://github.com/nextui-org/nextui/blob/2069a7a9d00291266fef763c6817b3bdd3ed4707/packages/components/button/src/use-button.ts#L169

[wingkwong]

We still allow users to pass onClick. However, if you look at the code, there is no onClick function passing to Button. Do you wanna investigate this issue? I could assign you if you wish.

[chirokas]

Well, I'm willing to try.

[wingkwong]

feel free to ping me in discord if you need help.

[chirokas]

@wingkwong :

The pressProps returned by the usePress Hook (in the useAriaButton Hook) always have an onClick prop. This will be passed to the Link component.

https://github.com/adobe/react-spectrum/blob/5548b8925798970db9ffeb1a84049b3afc6bc040/packages/%40react-aria/interactions/src/usePress.ts#L303

We need a private prop to represent the author's (non-user) onClick function!?

[wingkwong]

Good finding. Apart from pressProps.onClick from usePress, there is one more in buttonProps.

onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
  deprecatedOnClick?.(e);
},

We need a private prop to represent the author's (non-user) onClick function!?

I'm not sure what you mean. Mind to elaborate more?

[wingkwong]

interestingly I didn't see that warning on my another branch. The difference is below. Maybe another direction to explore this issue.

devDependencies:
- @react-types/shared 3.23.1
+ @react-types/shared 3.22.1

[awesome-pro]

@chirokas You have not solved this issue for a long time, so I solved it.
I hope you don't have any bad about it :)