From e3ad5732530951a889a998a07df754686e7c3372 Mon Sep 17 00:00:00 2001
From: Abbas Nazar <abbasnazar.970@gmail.com>
Date: Wed, 16 Oct 2024 02:25:02 +0500
Subject: [PATCH] feat: added delayed auto-focus on name field for
 NewComponentModal and NewPageModal

GitOrigin-RevId: fe3409c909f84fad36516b131f91fb579316980c
---
 .../wab/client/components/widgets/NewComponentModal.tsx  | 1 +
 .../src/wab/client/components/widgets/NewPageModal.tsx   | 3 ++-
 .../wab/src/wab/client/components/widgets/Textbox.tsx    | 9 ++++++++-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/platform/wab/src/wab/client/components/widgets/NewComponentModal.tsx b/platform/wab/src/wab/client/components/widgets/NewComponentModal.tsx
index 13607237d25..8329105f034 100644
--- a/platform/wab/src/wab/client/components/widgets/NewComponentModal.tsx
+++ b/platform/wab/src/wab/client/components/widgets/NewComponentModal.tsx
@@ -113,6 +113,7 @@ function NewComponentModal(props: NewComponentModalProps) {
       nameInput={{
         props: {
           autoFocus: true,
+          isDelayedFocus: true,
           "data-test-id": "prompt",
           ref: nameRef,
           value: name,
diff --git a/platform/wab/src/wab/client/components/widgets/NewPageModal.tsx b/platform/wab/src/wab/client/components/widgets/NewPageModal.tsx
index b25bfb5d9f5..64c37738ffa 100644
--- a/platform/wab/src/wab/client/components/widgets/NewPageModal.tsx
+++ b/platform/wab/src/wab/client/components/widgets/NewPageModal.tsx
@@ -40,7 +40,7 @@ function NewPageModal(props: NewPageModalProps) {
   const [projectId, setProjectId] = React.useState<string | undefined>(
     undefined
   );
-  const [name, setName] = React.useState("NewPage");
+  const [name, setName] = React.useState("");
   const nameRef = React.useRef<TextboxRef>(null);
 
   const isApp = studioCtx.siteInfo.hasAppAuth;
@@ -73,6 +73,7 @@ function NewPageModal(props: NewPageModalProps) {
       nameInput={{
         props: {
           autoFocus: true,
+          isDelayedFocus: true,
           "data-test-id": "prompt",
           ref: nameRef,
           value: name,
diff --git a/platform/wab/src/wab/client/components/widgets/Textbox.tsx b/platform/wab/src/wab/client/components/widgets/Textbox.tsx
index cfc6a3091d3..da9386902f5 100644
--- a/platform/wab/src/wab/client/components/widgets/Textbox.tsx
+++ b/platform/wab/src/wab/client/components/widgets/Textbox.tsx
@@ -29,6 +29,7 @@ type TextboxProps = Omit<React.ComponentProps<"input">, "disabled"> & {
   skipEditOnBlur?: boolean;
   selectAllOnAutoFocus?: boolean;
   selectAllOnFocus?: boolean;
+  isDelayedFocus?: boolean;
   children?: never;
   wrapperProps?: React.ComponentProps<"div">;
 };
@@ -107,7 +108,13 @@ export const Textbox = React.forwardRef(
       //
       // So we manually focus just in case.
       if (props.autoFocus) {
-        focus();
+        if (props?.isDelayedFocus) {
+          setTimeout(() => {
+            focus();
+          }, 300);
+        } else {
+          focus();
+        }
       }
     });