fix: update file chooser events (#11057)

docs/api/puppeteer.filechooser.cancel.md

@@ -10,10 +10,10 @@ Closes the file chooser without selecting any files.
 
 ```typescript
 class FileChooser {
-  cancel(): void;
+  cancel(): Promise<void>;
 }
 ```
 
 **Returns:**
 
-void
+Promise&lt;void&gt;

packages/puppeteer-core/src/cdp/ElementHandle.ts

@@ -133,31 +133,38 @@ export class CdpElementHandle<
         return path.resolve(filePath);
       }
     });
-    const {node} = await this.client.send('DOM.describeNode', {
-      objectId: this.id,
-    });
-    const {backendNodeId} = node;
 
-    /*  The zero-length array is a special case, it seems that
-         DOM.setFileInputFiles does not actually update the files in that case,
-         so the solution is to eval the element value to a new FileList directly.
+    /**
+     * The zero-length array is a special case, it seems that
+     * DOM.setFileInputFiles does not actually update the files in that case, so
+     * the solution is to eval the element value to a new FileList directly.
      */
     if (files.length === 0) {
+      // XXX: These events should converted to trusted events. Perhaps do this
+      // in `DOM.setFileInputFiles`?
       await this.evaluate(element => {
         element.files = new DataTransfer().files;
 
         // Dispatch events for this case because it should behave akin to a user action.
-        element.dispatchEvent(new Event('input', {bubbles: true}));
+        element.dispatchEvent(
+          new Event('input', {bubbles: true, composed: true})
+        );
         element.dispatchEvent(new Event('change', {bubbles: true}));
       });
-    } else {
+      return;
+    }
+
+    const {
+      node: {backendNodeId},
+    } = await this.client.send('DOM.describeNode', {
+      objectId: this.id,
+    });
     await this.client.send('DOM.setFileInputFiles', {
       objectId: this.id,
       files,
       backendNodeId,
     });
   }
-  }
 
   @throwIfDisposed()
   override async autofill(data: AutofillData): Promise<void> {

packages/puppeteer-core/src/common/FileChooser.ts

@@ -87,11 +87,16 @@ export class FileChooser {
   /**
    * Closes the file chooser without selecting any files.
    */
-  cancel(): void {
+  async cancel(): Promise<void> {
     assert(
       !this.#handled,
       'Cannot cancel FileChooser which is already handled!'
     );
     this.#handled = true;
+    // XXX: These events should converted to trusted events. Perhaps do this
+    // in `DOM.setFileInputFiles`?
+    await this.#element.evaluate(element => {
+      element.dispatchEvent(new Event('cancel', {bubbles: true}));
+    });
   }
 }

test/src/input.spec.ts

@@ -358,7 +358,7 @@ describe('input tests', function () {
       let error!: Error;
 
       try {
-        fileChooser.cancel();
+        await fileChooser.cancel();
       } catch (error_) {
         error = error_ as Error;
       }