From 1059e22f9ee2a6f17fc1a80d3476ead381a8631c Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Mon, 3 Feb 2020 15:50:45 -0800
Subject: [PATCH] fix(fill): make fill work for input[type=number] (#819)

---
 src/dom.ts        | 11 ++++++++---
 test/page.spec.js | 26 ++++++++++++++++++++++++--
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/dom.ts b/src/dom.ts
index e27572f5e9..5fafbd3730 100644
--- a/src/dom.ts
+++ b/src/dom.ts
@@ -358,7 +358,7 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
 
   async fill(value: string): Promise<void> {
     assert(helper.isString(value), 'Value must be string. Found value "' + value + '" of type "' + (typeof value) + '"');
-    const error = await this._evaluateInUtility((node: Node) => {
+    const error = await this._evaluateInUtility((node: Node, value: string) => {
       if (node.nodeType !== Node.ELEMENT_NODE)
         return 'Node is not of type HTMLElement';
       const element = node as HTMLElement;
@@ -375,9 +375,14 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
       if (element.nodeName.toLowerCase() === 'input') {
         const input = element as HTMLInputElement;
         const type = input.getAttribute('type') || '';
-        const kTextInputTypes = new Set(['', 'email', 'password', 'search', 'tel', 'text', 'url']);
+        const kTextInputTypes = new Set(['', 'email', 'number', 'password', 'search', 'tel', 'text', 'url']);
         if (!kTextInputTypes.has(type.toLowerCase()))
           return 'Cannot fill input of type "' + type + '".';
+        if (type.toLowerCase() === 'number') {
+          value = value.trim();
+          if (!value || isNaN(Number(value)))
+            return 'Cannot type text into input[type=number].';
+        }
         if (input.disabled)
           return 'Cannot fill a disabled input.';
         if (input.readOnly)
@@ -406,7 +411,7 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
         return 'Element is not an <input>, <textarea> or [contenteditable] element.';
       }
       return false;
-    });
+    }, value);
     if (error)
       throw new Error(error);
     await this._page.keyboard.sendCharacters(value);
diff --git a/test/page.spec.js b/test/page.spec.js
index c44d0522c9..4c712e76e2 100644
--- a/test/page.spec.js
+++ b/test/page.spec.js
@@ -1002,9 +1002,9 @@ module.exports.describe = function({testRunner, expect, headless, playwright, FF
       await page.fill('input', 'some value');
       expect(await page.evaluate(() => result)).toBe('some value');
     });
-    it('should throw on non-text inputs', async({page, server}) => {
+    it('should throw on unsupported inputs', async({page, server}) => {
       await page.goto(server.PREFIX + '/input/textarea.html');
-      for (const type of ['color', 'number', 'date']) {
+      for (const type of ['color', 'date']) {
         await page.$eval('input', (input, type) => input.setAttribute('type', type), type);
         let error = null;
         await page.fill('input', '').catch(e => error = e);
@@ -1110,6 +1110,28 @@ module.exports.describe = function({testRunner, expect, headless, playwright, FF
       await page.fill('div', 'some value');
       expect(await page.$eval('div', d => d.textContent)).toBe('some value');
     });
+    it('should be able to fill the input[type=number]', async({page}) => {
+      await page.setContent(`<input id="input" type="number"></input>`);
+      await page.fill('input', '42');
+      expect(await page.evaluate(() => input.value)).toBe('42');
+    });
+    it('should be able to fill exponent into the input[type=number]', async({page}) => {
+      await page.setContent(`<input id="input" type="number"></input>`);
+      await page.fill('input', '-10e5');
+      expect(await page.evaluate(() => input.value)).toBe('-10e5');
+    });
+    it('should not be able to fill input[type=number] with empty string', async({page}) => {
+      await page.setContent(`<input id="input" type="number"></input>`);
+      let error = null;
+      await page.fill('input', '').catch(e => error = e);
+      expect(error.message).toContain('Cannot type text into input[type=number].');
+    });
+    it('should not be able to fill text into the input[type=number]', async({page}) => {
+      await page.setContent(`<input id="input" type="number"></input>`);
+      let error = null;
+      await page.fill('input', '').catch(e => error = e);
+      expect(error.message).toContain('Cannot type text into input[type=number].');
+    });
   });
 
   describe('Page.Events.Close', function() {