From e6ec9e7f15b8f96b197b4ca4ae59b7b343cd253a Mon Sep 17 00:00:00 2001
From: eliang-stripe <99840257+eliang-stripe@users.noreply.github.com>
Date: Tue, 18 Jun 2024 14:12:50 -0500
Subject: [PATCH] fix input focus bug (#171)

---
 app/components/Screen.tsx                     |  2 +-
 .../testdata/CreateCheckoutSessionButton.tsx  | 70 +++++++++---------
 .../testdata/CreatePaymentsButton.tsx         | 71 +++++++++----------
 3 files changed, 70 insertions(+), 73 deletions(-)

diff --git a/app/components/Screen.tsx b/app/components/Screen.tsx
index b52e97e..4402989 100644
--- a/app/components/Screen.tsx
+++ b/app/components/Screen.tsx
@@ -24,7 +24,7 @@ export default function Screen({
         {/* Tools Panel container */}
         <div
           className={`${open ? 'translate-y-0 md:translate-x-0' : 'translate-y-full md:-translate-x-full md:translate-y-0'}
-          fixed bottom-0 z-[50] w-full overflow-hidden rounded-t-2xl bg-screen-foreground shadow-[0px_-4px_32px_rgba(0,0,0,0.15)] transition duration-500 ease-in-out md:h-screen md:w-[300px] md:rounded-none md:border-r md:shadow-none`}
+          z-45 fixed bottom-0 w-full overflow-hidden rounded-t-2xl bg-screen-foreground shadow-[0px_-4px_32px_rgba(0,0,0,0.15)] transition duration-500 ease-in-out md:h-screen md:w-[300px] md:rounded-none md:border-r md:shadow-none`}
         >
           <ToolsPanel />
         </div>
diff --git a/app/components/testdata/CreateCheckoutSessionButton.tsx b/app/components/testdata/CreateCheckoutSessionButton.tsx
index 0ccda69..8037588 100644
--- a/app/components/testdata/CreateCheckoutSessionButton.tsx
+++ b/app/components/testdata/CreateCheckoutSessionButton.tsx
@@ -138,9 +138,28 @@ export default function CreateCheckoutSessionButton({
     }
   };
 
-  const CreateCheckoutSessionForm = () => {
-    return (
-      <>
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button className={`${classes || 'border'}`} variant="ghost" size="sm">
+          Create test Checkout Session
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="p-4 text-primary sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Create test Checkout Session</DialogTitle>
+          <DialogDescription>
+            Simulate a grooming payment by creating a{' '}
+            <a
+              target="blank"
+              className="font-medium text-accent"
+              href="https://stripe.com/docs/api/checkout/sessions"
+            >
+              Checkout Session
+            </a>
+            .
+          </DialogDescription>
+        </DialogHeader>
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
             <FormField
@@ -150,12 +169,18 @@ export default function CreateCheckoutSessionButton({
                 <FormItem>
                   <FormLabel>Amount</FormLabel>
                   <FormControl>
-                    <Input
-                      {...field}
-                      placeholder="Leave blank for a random amount"
-                      type="number"
-                      step="0.01"
-                    />
+                    <div className="relative">
+                      <div className="absolute left-3 top-1/2 -translate-y-1/2">
+                        $
+                      </div>
+                      <Input
+                        {...field}
+                        placeholder="Leave blank for a random amount"
+                        className="pl-7"
+                        type="number"
+                        step="0.01"
+                      />
+                    </div>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -192,33 +217,6 @@ export default function CreateCheckoutSessionButton({
             </div>
           </form>
         </Form>
-      </>
-    );
-  };
-
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button className={`${classes || 'border'}`} variant="ghost" size="sm">
-          Create test Checkout Session
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="p-4 text-primary sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>Create test Checkout Session</DialogTitle>
-          <DialogDescription>
-            Simulate a grooming payment by creating a{' '}
-            <a
-              target="blank"
-              className="font-medium text-accent"
-              href="https://stripe.com/docs/api/checkout/sessions"
-            >
-              Checkout Session
-            </a>
-            .
-          </DialogDescription>
-        </DialogHeader>
-        <CreateCheckoutSessionForm />
       </DialogContent>
     </Dialog>
   );
diff --git a/app/components/testdata/CreatePaymentsButton.tsx b/app/components/testdata/CreatePaymentsButton.tsx
index 8e2689b..f248e9f 100644
--- a/app/components/testdata/CreatePaymentsButton.tsx
+++ b/app/components/testdata/CreatePaymentsButton.tsx
@@ -151,9 +151,29 @@ export default function CreatePaymentsButton({classes}: {classes?: string}) {
     }
   };
 
-  const CreatePaymentsForm = () => {
-    return (
-      <>
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button className={`${classes || 'border'}`} variant="ghost" size="sm">
+          Create test payments
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="p-4 text-primary sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Create test payments</DialogTitle>
+          <DialogDescription>
+            Simulate a grooming session by using a testmode payment method to{' '}
+            <a
+              target="blank"
+              className="font-medium text-accent"
+              href="https://stripe.com/docs/api/payment_intents"
+            >
+              create a payment intent
+            </a>
+            .
+          </DialogDescription>
+        </DialogHeader>
+
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
             <FormField
@@ -176,12 +196,18 @@ export default function CreatePaymentsButton({classes}: {classes?: string}) {
                 <FormItem>
                   <FormLabel>Amount</FormLabel>
                   <FormControl>
-                    <Input
-                      {...field}
-                      placeholder="Leave blank for a random amount"
-                      type="number"
-                      step="0.01"
-                    />
+                    <div className="relative">
+                      <div className="absolute left-3 top-1/2 -translate-y-1/2">
+                        $
+                      </div>
+                      <Input
+                        {...field}
+                        placeholder="Leave blank for a random amount"
+                        className="pl-7"
+                        type="number"
+                        step="0.01"
+                      />
+                    </div>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -247,33 +273,6 @@ export default function CreatePaymentsButton({classes}: {classes?: string}) {
             </div>
           </form>
         </Form>
-      </>
-    );
-  };
-
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button className={`${classes || 'border'}`} variant="ghost" size="sm">
-          Create test payments
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="p-4 text-primary sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>Create test payments</DialogTitle>
-          <DialogDescription>
-            Simulate a grooming session by using a testmode payment method to{' '}
-            <a
-              target="blank"
-              className="font-medium text-accent"
-              href="https://stripe.com/docs/api/payment_intents"
-            >
-              create a payment intent
-            </a>
-            .
-          </DialogDescription>
-        </DialogHeader>
-        <CreatePaymentsForm />
       </DialogContent>
     </Dialog>
   );