fix(blocks): resolve on file input dialog cancel (#6949)

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();

tests/attachment.spec.ts

@@ -624,3 +624,37 @@ test('press backspace after bookmark block can select bookmark block', async ({
   await assertBlockSelections(page, [['0', '1', '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);
+});