Second-Front-Ukraine/secondfront-donate-widget

Links with `onClick` and `href` compete for event handling

Closed this issue ยท 1 comments

Whenever <a href="#" onClick={handlerFunction}>Link</a> is used, for example here:

<p>Thank you for supporting Ukrainians! <br />๐Ÿ’™&nbsp;๐Ÿ’› <br /><a href="#" onClick={onDonationCancel}>Click here to make another contribution</a></p>

the proper way is to prevent default behaviour in the callback function with e.preventDefault(), otherwise page will navigate to #, which would probably result in jumping to the top of the page.

This issue applies to any <a> tag that uses href. Note, some answers suggest that <a href="#" onClick={() => handlerFunction()}>Link</a> doesn't suffer from this, but this solution behaves the same.

Addressed in #5