feat: added delayed auto-focus on name field for NewComponentModal an…

…d NewPageModal GitOrigin-RevId: fe3409c909f84fad36516b131f91fb579316980c
plasmicapp · Oct 16, 2024 · e3ad573 · e3ad573
1 parent 62b8579
commit e3ad573
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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();
+        }
       }
     });