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>
toeverything · May 18, 2024 · 90647ed · 90647ed
1 parent a9774c2
commit 90647ed
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git 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
@@ -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);
+});