From d78d337e2973d3ea51e6bc7411fe40ceb3d8ad67 Mon Sep 17 00:00:00 2001
From: Dmitry Gozman <dgozman@gmail.com>
Date: Mon, 25 Jan 2021 13:40:19 -0800
Subject: [PATCH] feat(fill): make fill work when targeting elements inside the
 label (#5143)

---
 docs/src/api/class-elementhandle.md   |  7 ++++---
 docs/src/api/class-frame.md           |  8 ++++----
 docs/src/api/class-page.md            |  8 ++++----
 src/server/injected/injectedScript.ts |  8 ++++++++
 test/page-fill.spec.ts                | 12 ++++++++++++
 types/types.d.ts                      | 20 ++++++++++++--------
 6 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/docs/src/api/class-elementhandle.md b/docs/src/api/class-elementhandle.md
index ef669e663d..5d6307f344 100644
--- a/docs/src/api/class-elementhandle.md
+++ b/docs/src/api/class-elementhandle.md
@@ -363,9 +363,10 @@ Optional event-specific initialization properties.
 
 ## async method: ElementHandle.fill
 
-This method waits for [actionability](./actionability.md) checks, focuses the element, fills it and triggers an `input`
-event after filling. If the element is not an `<input>`, `<textarea>` or `[contenteditable]` element, this method throws
-an error. Note that you can pass an empty string to clear the input field.
+This method waits for [actionability](./actionability.md) checks, focuses the element, fills it and triggers an `input` event after filling.
+If the element is inside the `<label>` element that has associated [control](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/control), that control will be filled instead.
+If the element to be filled is not an `<input>`, `<textarea>` or `[contenteditable]` element, this method throws an error.
+Note that you can pass an empty string to clear the input field.
 
 ### param: ElementHandle.fill.value
 - `value` <[string]>
diff --git a/docs/src/api/class-frame.md b/docs/src/api/class-frame.md
index 4116e7b0e1..003b21cbb0 100644
--- a/docs/src/api/class-frame.md
+++ b/docs/src/api/class-frame.md
@@ -564,10 +564,10 @@ Optional argument to pass to [`param: pageFunction`]
 
 ## async method: Frame.fill
 
-This method waits for an element matching [`param: selector`], waits for [actionability](./actionability.md) checks,
-focuses the element, fills it and triggers an `input` event after filling. If the element matching [`param: selector`]
-is not an `<input>`, `<textarea>` or `[contenteditable]` element, this method throws an error. Note that you can pass an
-empty string to clear the input field.
+This method waits for an element matching [`param: selector`], waits for [actionability](./actionability.md) checks, focuses the element, fills it and triggers an `input` event after filling.
+If the element is inside the `<label>` element that has associated [control](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/control), that control will be filled instead.
+If the element to be filled is not an `<input>`, `<textarea>` or `[contenteditable]` element, this method throws an error.
+Note that you can pass an empty string to clear the input field.
 
 To send fine-grained keyboard events, use [`method: Frame.type`].
 
diff --git a/docs/src/api/class-page.md b/docs/src/api/class-page.md
index accaef8802..ffaaee7ae6 100644
--- a/docs/src/api/class-page.md
+++ b/docs/src/api/class-page.md
@@ -1245,10 +1245,10 @@ Callback function which will be called in Playwright's context.
 
 ## async method: Page.fill
 
-This method waits for an element matching [`param: selector`], waits for [actionability](./actionability.md) checks,
-focuses the element, fills it and triggers an `input` event after filling. If the element matching [`param: selector`]
-is not an `<input>`, `<textarea>` or `[contenteditable]` element, this method throws an error. Note that you can pass an
-empty string to clear the input field.
+This method waits for an element matching [`param: selector`], waits for [actionability](./actionability.md) checks, focuses the element, fills it and triggers an `input` event after filling.
+If the element is inside the `<label>` element that has associated [control](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/control), that control will be filled instead.
+If the element to be filled is not an `<input>`, `<textarea>` or `[contenteditable]` element, this method throws an error.
+Note that you can pass an empty string to clear the input field.
 
 To send fine-grained keyboard events, use [`method: Page.type`].
 
diff --git a/src/server/injected/injectedScript.ts b/src/server/injected/injectedScript.ts
index d24506128a..a00888b885 100644
--- a/src/server/injected/injectedScript.ts
+++ b/src/server/injected/injectedScript.ts
@@ -323,7 +323,15 @@ export class InjectedScript {
     return this.pollRaf((progress, continuePolling) => {
       if (node.nodeType !== Node.ELEMENT_NODE)
         return 'error:notelement';
+
+      if (node && node.nodeName.toLowerCase() !== 'input' &&
+          node.nodeName.toLowerCase() !== 'textarea' &&
+          !(node as any).isContentEditable) {
+        // Go up to the label that might be connected to the input/textarea.
+        node = (node as Element).closest('label') || node;
+      }
       const element = this.findLabelTarget(node as Element);
+
       if (element && !element.isConnected)
         return 'error:notconnected';
       if (!element || !this.isVisible(element)) {
diff --git a/test/page-fill.spec.ts b/test/page-fill.spec.ts
index 1f83ed9e37..d2ecd6102c 100644
--- a/test/page-fill.spec.ts
+++ b/test/page-fill.spec.ts
@@ -46,6 +46,18 @@ it('should fill input with label 2', async ({page}) => {
   expect(await page.$eval('input', input => input.value)).toBe('some value');
 });
 
+it('should fill input with span inside the label', async ({page}) => {
+  await page.setContent(`<label for=target><span>Fill me</span></label><input id=target>`);
+  await page.fill('text=Fill me', 'some value');
+  expect(await page.$eval('input', input => input.value)).toBe('some value');
+});
+
+it('should fill input inside the label', async ({page}) => {
+  await page.setContent(`<label><input id=target></label>`);
+  await page.fill('input', 'some value');
+  expect(await page.$eval('input', input => input.value)).toBe('some value');
+});
+
 it('should fill textarea with label', async ({page}) => {
   await page.setContent(`<label for=target>Fill me</label><textarea id=target>hey</textarea>`);
   await page.fill('text=Fill me', 'some value');
diff --git a/types/types.d.ts b/types/types.d.ts
index 4bc92faf94..0bb8e48605 100644
--- a/types/types.d.ts
+++ b/types/types.d.ts
@@ -1668,9 +1668,10 @@ export interface Page {
 
   /**
    * This method waits for an element matching `selector`, waits for [actionability](https://playwright.dev/docs/actionability) checks, focuses the
-   * element, fills it and triggers an `input` event after filling. If the element matching `selector` is not an `<input>`,
-   * `<textarea>` or `[contenteditable]` element, this method throws an error. Note that you can pass an empty string to
-   * clear the input field.
+   * element, fills it and triggers an `input` event after filling. If the element is inside the `<label>` element that has
+   * associated [control](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/control), that control will be
+   * filled instead. If the element to be filled is not an `<input>`, `<textarea>` or `[contenteditable]` element, this
+   * method throws an error. Note that you can pass an empty string to clear the input field.
    * 
    * To send fine-grained keyboard events, use
    * [page.type(selector, text[, options])](https://playwright.dev/docs/api/class-page#pagetypeselector-text-options).
@@ -3678,9 +3679,10 @@ export interface Frame {
 
   /**
    * This method waits for an element matching `selector`, waits for [actionability](https://playwright.dev/docs/actionability) checks, focuses the
-   * element, fills it and triggers an `input` event after filling. If the element matching `selector` is not an `<input>`,
-   * `<textarea>` or `[contenteditable]` element, this method throws an error. Note that you can pass an empty string to
-   * clear the input field.
+   * element, fills it and triggers an `input` event after filling. If the element is inside the `<label>` element that has
+   * associated [control](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/control), that control will be
+   * filled instead. If the element to be filled is not an `<input>`, `<textarea>` or `[contenteditable]` element, this
+   * method throws an error. Note that you can pass an empty string to clear the input field.
    * 
    * To send fine-grained keyboard events, use
    * [frame.type(selector, text[, options])](https://playwright.dev/docs/api/class-frame#frametypeselector-text-options).
@@ -5630,8 +5632,10 @@ export interface ElementHandle<T=Node> extends JSHandle<T> {
 
   /**
    * This method waits for [actionability](https://playwright.dev/docs/actionability) checks, focuses the element, fills it and triggers an `input`
-   * event after filling. If the element is not an `<input>`, `<textarea>` or `[contenteditable]` element, this method throws
-   * an error. Note that you can pass an empty string to clear the input field.
+   * event after filling. If the element is inside the `<label>` element that has associated
+   * [control](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/control), that control will be filled
+   * instead. If the element to be filled is not an `<input>`, `<textarea>` or `[contenteditable]` element, this method
+   * throws an error. Note that you can pass an empty string to clear the input field.
    * @param value Value to set for the `<input>`, `<textarea>` or `[contenteditable]` element.
    * @param options 
    */