wouter icon indicating copy to clipboard operation
wouter copied to clipboard

Prevent navigation on Link component if event was cancelled

Open Tomas2D opened this issue 4 years ago • 3 comments

Due to calling onEvent (passed from props) after doing navigation, one cannot prevent cancelling the navigation process.

I propose to call onClick before navRef.current(); and then check if event was cancelled via e.isDefaultPrevented(). If so, then do not call navRef.current() action. What do you think?

https://github.com/molefrog/wouter/blob/cba34af73d01389be18d0ed275611336946c18fe/index.js#L98-L118

Tomas2D avatar Mar 11 '22 14:03 Tomas2D

I able to make a PR if you do not have a time, that is not a problem. @molefrog

Tomas2D avatar Mar 15 '22 20:03 Tomas2D

That would make a lot of sense, is event.isDefaultPrevented part of the web standard? To my shame, I haven't used this method.

Also, PRs are highly welcomed!

molefrog avatar Mar 18 '22 08:03 molefrog

It looks like that defaultPrevented property is, also with high browser compatibility as can be seen here. The isDefaultPrevented method is probably just some internal getter, which is not mentioned in standard web API, but defaultPrevented readonly property is.

This simple https://codesandbox.io/s/divine-bash-lhoxd7?file=/src/App.js demonstrate the funcionality.

I will create an PR.

Tomas2D avatar Mar 18 '22 09:03 Tomas2D

Landed in https://github.com/molefrog/wouter/releases/tag/v2.8.0 🎊

molefrog avatar Nov 02 '22 18:11 molefrog