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( undefined ); - const [name, setName] = React.useState("NewPage"); + const [name, setName] = React.useState(""); const nameRef = React.useRef(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, "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(); + } } });