From 4caf4281fdeadf5cd9b42692123f097bc4b72bea Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Sat, 14 Mar 2026 10:46:51 +0300
Subject: [PATCH] Fix file open dialog not working on first click in Safari

Replace hand-rolled input element creation with VueUse's useFileDialog,
which creates the input once and reuses it. Creating a new <input>
element and calling .click() immediately was being swallowed by Safari
on the first attempt.
---
 src/composables/use-menu.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/composables/use-menu.ts b/src/composables/use-menu.ts
index 1868b1420..0cbaf140a 100644
--- a/src/composables/use-menu.ts
+++ b/src/composables/use-menu.ts
@@ -1,9 +1,16 @@
 import { onUnmounted } from 'vue'
+import { useFileDialog } from '@vueuse/core'
 
 import { IS_TAURI } from '@/constants'
 import { useEditorStore } from '@/stores/editor'
 import { openFileInNewTab, createTab, closeTab, activeTab } from '@/stores/tabs'
 
+const fileDialog = useFileDialog({ accept: '.fig', multiple: false, reset: true })
+fileDialog.onChange((files) => {
+  const file = files?.[0]
+  if (file) void openFileInNewTab(file)
+})
+
 export async function openFileDialog() {
   if (IS_TAURI) {
     const { open } = await import('@tauri-apps/plugin-dialog')
@@ -37,14 +44,7 @@ export async function openFileDialog() {
     }
   }
 
-  const input = document.createElement('input')
-  input.type = 'file'
-  input.accept = '.fig'
-  input.addEventListener('change', () => {
-    const file = input.files?.[0]
-    if (file) void openFileInNewTab(file)
-  })
-  input.click()
+  fileDialog.open()
 }
 
 const store = useEditorStore()