From 0069519a4bcb3539a16a133ea38e4d14c5a978ea Mon Sep 17 00:00:00 2001
From: Quentin Gliech <quenting@element.io>
Date: Tue, 8 Aug 2023 15:18:25 +0200
Subject: [PATCH] frontend: make the link behavior better

It now ignores clicks with modifiers and has the right full href
---
 frontend/src/Router.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Router.tsx b/frontend/src/Router.tsx
index d73ce303..4c1771b9 100644
--- a/frontend/src/Router.tsx
+++ b/frontend/src/Router.tsx
@@ -149,13 +149,21 @@ const Router: React.FC = () => (
   </Layout>
 );
 
+// Filter out clicks with modifiers or that have been prevented
+const shouldHandleClick = (e: React.MouseEvent): boolean =>
+  !e.defaultPrevented &&
+  e.button === 0 &&
+  !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
+
 export const Link: React.FC<
   {
     route: Route;
     children: React.ReactNode;
   } & React.HTMLProps<HTMLAnchorElement>
 > = ({ route, children, ...props }) => {
+  const config = useAtomValue(appConfigAtom);
   const path = routeToPath(route);
+  const fullUrl = config.root + path;
   const setRoute = useSetAtom(routeAtom);
 
   // TODO: we should probably have more user control over this
@@ -163,8 +171,13 @@ export const Link: React.FC<
 
   return (
     <a
-      href={path}
+      href={fullUrl}
       onClick={(e: React.MouseEvent): void => {
+        // Only handle left clicks without modifiers
+        if (!shouldHandleClick(e)) {
+          return;
+        }
+
         e.preventDefault();
         startTransition(() => {
           setRoute(route);