ctrl + click to open link in new tab not working

[marvinhagemeister]

For desktop browsers there are typical navigation patterns to open the link in a new tab instead of the current one. The most common one is ctrl + click or clicking with the middle mouse button. Currently this doesn't work because the event will always be prevented:

wouter/index.js

Lines 91 to 98 in c9c7900

	const handleClick = useCallback(
	event => {
	event.preventDefault();
	navigate(href);
	onClick && onClick(event);
	},
	[href, onClick, navigate]
	);

In preact-router we have this line which explicitly checks for common key combinations and lets the browser handle the event instead:

// ignore events the browser takes care of already:
if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey || e.button!==0) return;

https://github.com/preactjs/preact-router/blob/3eb5b31fe75c34672eeb13f2d310dee6d51b1f97/src/index.js#L112

[molefrog]

Hi @marvinhagemeister!
This is a really nice feedback, I'm a huge fan of ctrl+click myself, but somehow forgot about this scenario 😄

I've got two questions before applying the fix:

1. Will this code be supported by React as well? Do I need to have an additional check to cover React?
2. What does the e.button !== 0 check do?

[molefrog]

Ok, I jest checked and seems like it's going to be compatible with React, their SyntheticEvent has all these attributes.

And regarding 2: the check is needed in order to ignore all none-left button clicks. Seems like it should work!

[molefrog]

Done!
Fixed in 55fc794 and c54bcf2

[marvinhagemeister]

@molefrog Holy moly that was quick! Happy to hear that you found the answers already 👍 Super excited about this router as this is the first one where I think "yep this is how a router should be done". Love it 💯