From 90647ed35a8d6203fe87da490c746748ef507682 Mon Sep 17 00:00:00 2001
From: Kirill T <contact@shvix.dev>
Date: Sat, 18 May 2024 04:19:38 +0200
Subject: [PATCH] fix(blocks): resolve on file input dialog cancel (#6950)

Co-authored-by: Aadi <123532141+golok727@users.noreply.github.com>
Co-authored-by: Mirone <Saul-Mirone@outlook.com>
---
 packages/blocks/src/_common/utils/filesys.ts |  4 +++
 tests/attachment.spec.ts                     | 38 +++++++++++++++++++-
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/packages/blocks/src/_common/utils/filesys.ts b/packages/blocks/src/_common/utils/filesys.ts
index ac0d5b99c960..4533bab75703 100644
--- a/packages/blocks/src/_common/utils/filesys.ts
+++ b/packages/blocks/src/_common/utils/filesys.ts
@@ -201,6 +201,10 @@ export async function openFileOrFiles({
       }
       resolve(input.files[0]);
     });
+    // The `cancel` event fires when the user cancels the dialog.
+    input.addEventListener('cancel', () => {
+      resolve(null);
+    });
     // Show the picker.
     if ('showPicker' in HTMLInputElement.prototype) {
       input.showPicker();
diff --git a/tests/attachment.spec.ts b/tests/attachment.spec.ts
index 52766d406828..ae3863c2518a 100644
--- a/tests/attachment.spec.ts
+++ b/tests/attachment.spec.ts
@@ -60,8 +60,10 @@ function getAttachment(page: Page) {
     await type(page, 'file', 100);
     await expect(slashMenu).toBeVisible();
 
+    const fileChooser = page.waitForEvent('filechooser');
     await pressEnter(page);
-    await page.setInputFiles("input[type='file']", FILE_PATH);
+    await (await fileChooser).setFiles(FILE_PATH);
+
     // Try to break the undo redo test
     await captureHistory(page);
 
@@ -624,3 +626,37 @@ test('press backspace after bookmark block can select bookmark block', async ({
   await assertBlockSelections(page, ['4']);
   await assertBlockCount(page, 'paragraph', 0);
 });
+
+test('cancel file picker with input element resolves', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyParagraphState(page);
+
+  const { attachment } = getAttachment(page);
+
+  await focusRichText(page);
+  await pressEnter(page);
+  await pressArrowUp(page);
+
+  await page.evaluate(() => {
+    // Force fallback to input[type=file]
+    window.showOpenFilePicker = undefined;
+  });
+
+  const slashMenu = page.locator(`.slash-menu`);
+  await waitNextFrame(page);
+  await type(page, '/file', 100);
+  await expect(slashMenu).toBeVisible();
+
+  const fileChooser = page.waitForEvent('filechooser');
+  await pressEnter(page);
+  const inputFile = page.locator("input[type='file']");
+  await expect(inputFile).toHaveCount(1);
+
+  // This does not trigger `cancel` event and,
+  // therefore, the test isn't representative.
+  // Waiting for https://github.com/microsoft/playwright/issues/27524
+  await (await fileChooser).setFiles([]);
+
+  await expect(attachment).toHaveCount(0);
+  await expect(inputFile).toHaveCount(0);
+});