fix: resolve issue with ref re-routing

coder · Parkreiner · Feb 1, 2024 · Jan 26, 2024 · Jan 26, 2024 · Jan 26, 2024
commit 163db9296b68df08a7e08fec87cf150cfa0bd16e
diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
@@ -1,4 +1,4 @@
-import { useRef, type FC } from "react";
+import { type FC, type KeyboardEvent, type MouseEvent, useRef } from "react";
 import { type Interpolation, type Theme } from "@emotion/react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 import { CopyButton } from "../CopyButton/CopyButton";
@@ -18,7 +18,11 @@ export const CodeExample: FC<CodeExampleProps> = ({
   className,
 }) => {
   const buttonRef = useRef<HTMLButtonElement>(null);
-  const triggerButton = () => buttonRef.current?.click();
+  const triggerButton = (event: KeyboardEvent | MouseEvent) => {
+    if (event.target !== buttonRef.current) {
+      buttonRef.current?.click();
+    }
+  };
 
   return (
     /* eslint-disable-next-line jsx-a11y/no-static-element-interactions --
@@ -28,19 +32,15 @@ export const CodeExample: FC<CodeExampleProps> = ({
     <div
       css={styles.container}
       className={className}
-      onClick={(event) => {
-        if (event.target !== buttonRef.current) {
-          triggerButton();
-        }
-      }}
+      onClick={triggerButton}
       onKeyDown={(event) => {
         if (event.key === "Enter") {
-          triggerButton();
+          triggerButton(event);
         }
       }}
       onKeyUp={(event) => {
         if (event.key === " ") {
-          triggerButton();
+          triggerButton(event);
         }
       }}
     >

diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx
@@ -2,7 +2,7 @@ import IconButton from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
 import Check from "@mui/icons-material/Check";
 import { css, type Interpolation, type Theme } from "@emotion/react";
-import { forwardRef, MouseEventHandler, type ReactNode } from "react";
+import { forwardRef, type MouseEventHandler, type ReactNode } from "react";
 import { useClipboard } from "hooks/useClipboard";
 import { FileCopyIcon } from "../Icons/FileCopyIcon";
 

diff --git a/site/src/pages/CliAuthPage/CliAuthPageView.tsx b/site/src/pages/CliAuthPage/CliAuthPageView.tsx
@@ -43,7 +43,7 @@ const styles = {
     color: theme.palette.text.secondary,
     paddingBottom: 32,
     textAlign: "center",
-    lineHeight: "160%",
+    lineHeight: 1.6,
   }),
 
   backButton: {