Fix searchbox popover on touch devices (#773)

* Add delay on touch pointer event when opening searchbox

* Add playwright mobile test

browser_tests/nodeSearchBox.spec.ts

@@ -86,6 +86,23 @@ test.describe('Node search box', () => {
       .first()
     await expect(firstResult).toHaveAttribute('aria-label', node)
   })
+
+  test('@mobile Can trigger on empty canvas tap', async ({ comfyPage }) => {
+    await comfyPage.closeMenu()
+    await comfyPage.loadWorkflow('single_ksampler')
+    const screenCenter = {
+      x: 200,
+      y: 400
+    }
+    await comfyPage.canvas.tap({
+      position: screenCenter
+    })
+    await comfyPage.canvas.tap({
+      position: screenCenter
+    })
+    await comfyPage.page.waitForTimeout(256)
+    await expect(comfyPage.searchBox.input).not.toHaveCount(0)
+  })
 })
 
 test.describe('Release context menu', () => {

playwright.config.ts

@@ -36,8 +36,9 @@ export default defineConfig({
     {
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
-      timeout: 15000
+      timeout: 15000,
-    }
+      grepInvert: /@mobile/ // Run all tests except those tagged with @mobile
+    },
 
     // {
     //   name: 'firefox',
@@ -50,10 +51,11 @@ export default defineConfig({
     // },
 
     /* Test against mobile viewports. */
-    // {
+    {
-    //   name: 'Mobile Chrome',
+      name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
+      use: { ...devices['Pixel 5'], hasTouch: true },
-    // },
+      grep: /@mobile/ // Run only tests tagged with @mobile
+    }
     // {
     //   name: 'Mobile Safari',
     //   use: { ...devices['iPhone 12'] },

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -98,7 +98,13 @@ const newSearchBoxEnabled = computed(
 )
 const showSearchBox = (e: LiteGraphCanvasEvent) => {
   if (newSearchBoxEnabled.value) {
-    showNewSearchBox(e)
+    if (e.detail.originalEvent?.pointerType === 'touch') {
+      setTimeout(() => {
+        showNewSearchBox(e)
+      }, 128)
+    } else {
+      showNewSearchBox(e)
+    }
   } else {
     canvasStore.canvas.showSearchBox(e.detail.originalEvent as MouseEvent)
   }