From 87e90cb30b976ae91752db5a71777afeca4641af Mon Sep 17 00:00:00 2001
From: "Anh (Daniel) Le" <ledzanh@gmail.com>
Date: Thu, 18 Jul 2024 09:44:45 +0700
Subject: [PATCH] fix: use copy-to-clipboard for visibility input

---
 components/shared/toggle-visibility-input.tsx | 25 ++++++++-----------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/components/shared/toggle-visibility-input.tsx b/components/shared/toggle-visibility-input.tsx
index 04cebaad7..bb11eeaef 100644
--- a/components/shared/toggle-visibility-input.tsx
+++ b/components/shared/toggle-visibility-input.tsx
@@ -1,8 +1,9 @@
-import { EyeIcon, EyeOffIcon, Clipboard } from "lucide-react";
+import copy from "copy-to-clipboard";
+import { Clipboard, EyeIcon, EyeOffIcon } from "lucide-react";
 import { useRef, useState } from "react";
+import { toast } from "sonner";
 import { Button } from "../ui/button";
 import { Input, type InputProps } from "../ui/input";
-import { toast } from "sonner";
 
 export const ToggleVisibilityInput = ({ ...props }: InputProps) => {
 	const [isPasswordVisible, setIsPasswordVisible] = useState(false);
@@ -12,23 +13,17 @@ export const ToggleVisibilityInput = ({ ...props }: InputProps) => {
 		setIsPasswordVisible((prevVisibility) => !prevVisibility);
 	};
 
-	const copyToClipboard = () => {
-		if (!inputRef.current) return;
-
-		const inputElement = inputRef.current;
-		const text = inputElement.value;
-
-		inputElement.select();
-		navigator.clipboard.writeText(text);
-
-		toast.success("Value is copied to clipboard");
-	};
-
 	const inputType = isPasswordVisible ? "text" : "password";
 	return (
 		<div className="flex w-full items-center space-x-2">
 			<Input ref={inputRef} type={inputType} {...props} />
-			<Button variant={"secondary"} onClick={copyToClipboard}>
+			<Button
+				variant={"secondary"}
+				onClick={() => {
+					copy(inputRef.current?.value || "");
+					toast.success("Value is copied to clipboard");
+				}}
+			>
 				<Clipboard className="size-4 text-muted-foreground" />
 			</Button>
 			<Button onClick={togglePasswordVisibility} variant={"secondary"}>