fix(codegen): only close dialog via buttons or on clicks outside (#38022)

Author: agg23

packages/injected/src/recorder/recorder.ts

@@ -1785,6 +1785,9 @@ class Dialog {
       options.onCancel?.();
     };
 
+    // Ensure any clicks in the dialog are caught, rather than passing through to the page and thus closing the dialog
+    this._dialogElement.addEventListener('click', event => event.stopPropagation());
+
     const toolbarElement = this._recorder.document.createElement('x-pw-tools-list');
     const labelElement = this._recorder.document.createElement('label');
     labelElement.textContent = options.label;

tests/library/inspector/cli-codegen-3.spec.ts

@@ -895,6 +895,36 @@ await page.GetByTestId("testid").HoverAsync();`);
     await expect(glassPane.locator('> x-pw-dialog .accept > x-div').evaluate(elem => getComputedStyle(elem).clipPath)).resolves.toBe('url("#icon-check")');
     await expect(glassPane.locator('> svg > defs > clipPath#icon-check')).toBeAttached();
   });
+
+  test('should keep dialog open when clicking inside', async ({ openRecorder }) => {
+    const { page } = await openRecorder();
+    await page.setContent('<div>hello</div>');
+
+    const assertTextButton = page.getByTitle('Assert text');
+    const helloContent = page.getByText('hello');
+
+    await assertTextButton.click();
+    await helloContent.click();
+
+    const dialog = page.locator('x-pw-dialog');
+    await expect(dialog).toBeVisible();
+
+    await page.locator('x-pw-dialog x-pw-tools-list').click();
+    await expect(dialog).toBeVisible();
+
+    await page.locator('x-pw-dialog textarea').click();
+    await expect(dialog).toBeVisible();
+
+    await page.locator('x-pw-dialog .accept').click();
+    await expect(dialog).toBeHidden();
+
+    await assertTextButton.click();
+    await helloContent.click();
+    await expect(dialog).toBeVisible();
+    // Like the user clicking outside the dialog
+    await page.locator('x-pw-glass').click();
+    await expect(dialog).toBeHidden();
+  });
 });
 
 async function createFrameHierarchy(page: Page, recorder: Recorder, server: TestServer) {