fix(UI): fix modal focus in inputs

hatemhosny · hatemhosny · commit 92f94162d04b · 2025-04-04T00:09:34.000+02:00
diff --git a/src/livecodes/UI/deploy.ts b/src/livecodes/UI/deploy.ts
@@ -222,7 +222,7 @@ export const createDeployUI = async ({
     await publish(user, name, message, commitSource, newRepo);
   });
 
-  modal.show(deployContainer, { isAsync: true });
+  modal.show(deployContainer, { isAsync: true, autoFocus: false });
   newRepoNameInput.focus();
 
   if (!user) return;
diff --git a/src/livecodes/UI/import.ts b/src/livecodes/UI/import.ts
@@ -268,6 +268,6 @@ export const createImportUI = ({
     showScreen('open');
   });
 
-  modal.show(importContainer, { isAsync: true });
+  modal.show(importContainer, { isAsync: true, autoFocus: false });
   getUrlImportInput(importContainer).focus();
 };
diff --git a/src/livecodes/UI/info.ts b/src/livecodes/UI/info.ts
@@ -29,7 +29,7 @@ export const createProjectInfoUI = async (
   const div = document.createElement('div');
   div.innerHTML = infoScreen;
   const projectInfoContainer = div.firstChild as HTMLElement;
-  modal.show(projectInfoContainer, { onClose: () => updateInfo() });
+  modal.show(projectInfoContainer, { onClose: () => updateInfo(), autoFocus: false });
 
   const titleInput = UI.getInfoTitleInput();
   titleInput.value = config.title;
diff --git a/src/livecodes/UI/modal.ts b/src/livecodes/UI/modal.ts
@@ -61,7 +61,6 @@ export const createModal = (deps: {
       modal.showModal();
     }
     overlay.classList.remove('hidden');
-
     setTimeout(() => {
       if (scrollToSelector) {
         const target = container.querySelector<HTMLElement>(scrollToSelector);
diff --git a/src/livecodes/UI/resources.ts b/src/livecodes/UI/resources.ts
@@ -31,7 +31,7 @@ export const createExternalResourcesUI = ({
   const div = document.createElement('div');
   div.innerHTML = resourcesScreen;
   const resourcesContainer = div.firstChild as HTMLElement;
-  modal.show(resourcesContainer, { onClose: () => updateResources() });
+  modal.show(resourcesContainer, { onClose: () => updateResources(), autoFocus: false });
 
   const externalResources = getExternalResourcesTextareas();
   externalResources.forEach((textarea) => {
diff --git a/src/livecodes/UI/sync-ui.ts b/src/livecodes/UI/sync-ui.ts
@@ -202,7 +202,7 @@ export const createSyncUI = async ({
     updateSyncStatus({ inProgress: false, lastSync });
   });
 
-  modal.show(syncContainer, { isAsync: true });
+  modal.show(syncContainer, { isAsync: true, autoFocus: false });
   newRepoNameInput.focus();
 
   if (!user) return;
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
@@ -3455,7 +3455,7 @@ const handleOpen = () => {
 
 const handleImport = () => {
   const createImportUI = async () => {
-    modal.show(loadingMessage(), { size: 'small' });
+    modal.show(loadingMessage(), { size: 'small', autoFocus: false });
     const importModule: typeof import('./UI/import') = await import(baseUrl + '{{hash:import.js}}');
     importModule.createImportUI({
       baseUrl,
@@ -3639,7 +3639,7 @@ const handleDeploy = () => {
       );
       return;
     }
-    modal.show(loadingMessage(), { size: 'small' });
+    modal.show(loadingMessage(), { size: 'small', autoFocus: false });
 
     const getProjectDeployRepo = async () => {
       if (!projectId) return;
@@ -3690,7 +3690,7 @@ const handleSync = () => {
       );
       return;
     }
-    modal.show(loadingMessage(), { size: 'small' });
+    modal.show(loadingMessage(), { size: 'small', autoFocus: false });
 
     const syncUIModule: typeof import('./UI/sync-ui') = await import(
       baseUrl + '{{hash:sync-ui.js}}'
@@ -4374,7 +4374,7 @@ const handleExternalResources = () => {
       dispatchChangeEvent();
     };
 
-    modal.show(loadingMessage(), { size: 'small' });
+    modal.show(loadingMessage(), { size: 'small', autoFocus: false });
     const resourcesModule: typeof import('./UI/resources') = await import(
       baseUrl + '{{hash:resources.js}}'
     );

Original file line number	Diff line number	Diff line change
`@@ -61,7 +61,6 @@ export const createModal = (deps: {`
`61`	`61`	`modal.showModal();`
`62`	`62`	`}`
`63`	`63`	`overlay.classList.remove('hidden');`
`64`		`-`
`65`	`64`	`setTimeout(() => {`
`66`	`65`	`if (scrollToSelector) {`
`67`	`66`	`const target = container.querySelector<HTMLElement>(scrollToSelector);`