[BUG] - Button press event should not propagate to parent Link.

[chen-yan]

HeroUI Version

2.6, 2.7

Describe the bug

When click a Button inside Link component (ListboxItem and some other components has href attribute will render as link) should not causing page redirect by Link.

We can stop it by adding onClick (e=>{e.preventDefault()}), but I think it should be work as default as PressEvent's shouldStopPropagation is true and onClick method is marked as deprecated.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

code example:

<Link href="/other-page"> <span>Other Page</span> <Button onPress={console.log("button clicked.")}>button</Button> </Link>

when button clicked, page jump to "other-page"

Expected behavior

stay on current page, print log.

Screenshots or Videos

No response

Operating System Version

Windows, MacOS

Browser

Safari

[linear[bot]]

ENG-2111 [BUG] - Button press event should Propagate to Link parent.

[leotaozeng]

I'd like to work on this

[leotaozeng]

I believe this is not a HeroUI issue rather than React Aria.

First of all, button shouldn't be nested inside a, it's not valid HTML. See here https://github.com/adobe/react-spectrum/issues/963#issuecomment-674176254.

Also according to this comment, the current solution is to use onClick={e => e.preventDefault()}.