fix state issue which resulted in text edits causing repeated focus loss

src/components/ZapDialog.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, forwardRef } from 'react';
 import { Zap, Copy, Check, ExternalLink, Sparkle, Sparkles, Star, Rocket, ArrowLeft, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
@@ -47,114 +47,41 @@ const presetAmounts = [
   { amount: 1000, icon: Rocket },
 ];
 
-export function ZapDialog({ target, children, className }: ZapDialogProps) {
-  const [open, setOpen] = useState(false);
-  const { user } = useCurrentUser();
-  const { data: author } = useAuthor(target.pubkey);
-  const { toast } = useToast();
-  const { webln, activeNWC, hasWebLN, detectWebLN } = useWallet();
-  const { zap, isZapping, invoice, setInvoice } = useZaps(target, webln, activeNWC, () => setOpen(false));
-  const [amount, setAmount] = useState<number | string>(100);
-  const [comment, setComment] = useState<string>('');
-  const [copied, setCopied] = useState(false);
-  const [qrCodeUrl, setQrCodeUrl] = useState<string>('');
-  const inputRef = useRef<HTMLInputElement>(null);
-  const isMobile = useIsMobile();
-
-
-
-  useEffect(() => {
-    if (target) {
-      setComment('Zapped with MKStack!');
-    }
-  }, [target]);
-
-  // Detect WebLN when dialog opens
-  useEffect(() => {
-    if (open && !hasWebLN) {
-      detectWebLN();
-    }
-  }, [open, hasWebLN, detectWebLN]);
-
-  // Generate QR code
-  useEffect(() => {
-    let isCancelled = false;
-
-    const generateQR = async () => {
-      if (!invoice) {
-        setQrCodeUrl('');
-        return;
+interface ZapContentProps {
+  invoice: string | null;
+  amount: number | string;
+  comment: string;
+  isZapping: boolean;
+  qrCodeUrl: string;
+  copied: boolean;
+  hasWebLN: boolean;
+  handleZap: () => void;
+  handleCopy: () => void;
+  openInWallet: () => void;
+  setAmount: (amount: number | string) => void;
+  setComment: (comment: string) => void;
+  inputRef: React.RefObject<HTMLInputElement>;
+  zap: (amount: number, comment: string) => void;
 }
 
-      try {
-        const url = await QRCode.toDataURL(invoice.toUpperCase(), {
-          width: 512,
-          margin: 2,
-          color: {
-            dark: '#000000',
-            light: '#FFFFFF',
-          },
-        });
-
-        if (!isCancelled) {
-          setQrCodeUrl(url);
-        }
-      } catch (err) {
-        if (!isCancelled) {
-          console.error('Failed to generate QR code:', err);
-        }
-      }
-    };
-
-    generateQR();
-
-    return () => {
-      isCancelled = true;
-    };
-  }, [invoice]);
-
-  const handleCopy = async () => {
-    if (invoice) {
-      await navigator.clipboard.writeText(invoice);
-      setCopied(true);
-      toast({
-        title: 'Invoice copied',
-        description: 'Lightning invoice copied to clipboard',
-      });
-      setTimeout(() => setCopied(false), 2000);
-    }
-  };
-
-  const openInWallet = () => {
-    if (invoice) {
-      const lightningUrl = `lightning:${invoice}`;
-      window.open(lightningUrl, '_blank');
-    }
-  };
-
-  useEffect(() => {
-    if (open) {
-      setAmount(100);
-      setInvoice(null);
-      setCopied(false);
-      setQrCodeUrl('');
-    } else {
-      // Clean up state when dialog closes
-      setAmount(100);
-      setInvoice(null);
-      setCopied(false);
-      setQrCodeUrl('');
-    }
-  }, [open, setInvoice]);
-
-  const handleZap = () => {
-    const finalAmount = typeof amount === 'string' ? parseInt(amount, 10) : amount;
-    zap(finalAmount, comment);
-  };
-
-  // Shared content component
-  const ZapContent = () => (
-    <>
+// Moved ZapContent outside of ZapDialog to prevent re-renders causing focus loss
+const ZapContent = forwardRef<HTMLDivElement, ZapContentProps>(({
+  invoice,
+  amount,
+  comment,
+  isZapping,
+  qrCodeUrl,
+  copied,
+  hasWebLN,
+  handleZap,
+  handleCopy,
+  openInWallet,
+  setAmount,
+  setComment,
+  inputRef,
+  zap,
+}, ref) => (
+  <div ref={ref}>
     {invoice ? (
       <div className="flex flex-col h-full min-h-0">
         {/* Payment amount display */}
@@ -302,8 +229,132 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
         </div>
       </>
     )}
-    </>
-  );
+  </div>
+));
+ZapContent.displayName = 'ZapContent';
+
+
+export function ZapDialog({ target, children, className }: ZapDialogProps) {
+  const [open, setOpen] = useState(false);
+  const { user } = useCurrentUser();
+  const { data: author } = useAuthor(target.pubkey);
+  const { toast } = useToast();
+  const { webln, activeNWC, hasWebLN, detectWebLN } = useWallet();
+  const { zap, isZapping, invoice, setInvoice } = useZaps(target, webln, activeNWC, () => setOpen(false));
+  const [amount, setAmount] = useState<number | string>(100);
+  const [comment, setComment] = useState<string>('');
+  const [copied, setCopied] = useState(false);
+  const [qrCodeUrl, setQrCodeUrl] = useState<string>('');
+  const inputRef = useRef<HTMLInputElement>(null);
+  const isMobile = useIsMobile();
+
+
+
+  useEffect(() => {
+    if (target) {
+      setComment('Zapped with MKStack!');
+    }
+  }, [target]);
+
+  // Detect WebLN when dialog opens
+  useEffect(() => {
+    if (open && !hasWebLN) {
+      detectWebLN();
+    }
+  }, [open, hasWebLN, detectWebLN]);
+
+  // Generate QR code
+  useEffect(() => {
+    let isCancelled = false;
+
+    const generateQR = async () => {
+      if (!invoice) {
+        setQrCodeUrl('');
+        return;
+      }
+
+      try {
+        const url = await QRCode.toDataURL(invoice.toUpperCase(), {
+          width: 512,
+          margin: 2,
+          color: {
+            dark: '#000000',
+            light: '#FFFFFF',
+          },
+        });
+
+        if (!isCancelled) {
+          setQrCodeUrl(url);
+        }
+      } catch (err) {
+        if (!isCancelled) {
+          console.error('Failed to generate QR code:', err);
+        }
+      }
+    };
+
+    generateQR();
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [invoice]);
+
+  const handleCopy = async () => {
+    if (invoice) {
+      await navigator.clipboard.writeText(invoice);
+      setCopied(true);
+      toast({
+        title: 'Invoice copied',
+        description: 'Lightning invoice copied to clipboard',
+      });
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const openInWallet = () => {
+    if (invoice) {
+      const lightningUrl = `lightning:${invoice}`;
+      window.open(lightningUrl, '_blank');
+    }
+  };
+
+  useEffect(() => {
+    if (open) {
+      setAmount(100);
+      setInvoice(null);
+      setCopied(false);
+      setQrCodeUrl('');
+    } else {
+      // Clean up state when dialog closes
+      setAmount(100);
+      setInvoice(null);
+      setCopied(false);
+      setQrCodeUrl('');
+    }
+  }, [open, setInvoice]);
+
+  const handleZap = () => {
+    const finalAmount = typeof amount === 'string' ? parseInt(amount, 10) : amount;
+    zap(finalAmount, comment);
+  };
+
+  const contentProps = {
+    invoice,
+    amount,
+    comment,
+    isZapping,
+    qrCodeUrl,
+    copied,
+    hasWebLN,
+    handleZap,
+    handleCopy,
+    openInWallet,
+    setAmount,
+    setComment,
+    inputRef,
+    zap,
+  };
 
   if (!user || user.pubkey === target.pubkey || !author?.metadata?.lud06 && !author?.metadata?.lud16) {
     return null;
@@ -366,7 +417,7 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
             </DrawerDescription>
           </DrawerHeader>
           <div className={invoice ? "flex-1 overflow-y-auto px-2 pb-4" : "overflow-y-auto"}>
-            <ZapContent />
+            <ZapContent {...contentProps} />
           </div>
         </DrawerContent>
       </Drawer>
@@ -396,7 +447,7 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
           </DialogDescription>
         </DialogHeader>
         <div className="overflow-y-auto">
-          <ZapContent />
+          <ZapContent {...contentProps} />
         </div>
       </DialogContent>
     </Dialog>

src/hooks/useZaps.ts

@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect } from 'react';
+import { useState, useMemo, useEffect, useCallback } from 'react';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { useAuthor } from '@/hooks/useAuthor';
 import { useAppContext } from '@/hooks/useAppContext';
@@ -303,6 +303,10 @@ export function useZaps(
     }
   };
 
+  const resetInvoice = useCallback(() => {
+    setInvoice(null);
+  }, []);
+
   return {
     zaps,
     zapCount,
@@ -312,5 +316,6 @@ export function useZaps(
     isZapping,
     invoice,
     setInvoice,
+    resetInvoice,
   };
 }