From 3335d369d3c5054517db7cdc541aba31184b9d07 Mon Sep 17 00:00:00 2001
From: Joel Einbinder <joel.einbinder@gmail.com>
Date: Tue, 31 Jul 2018 11:22:26 -0700
Subject: [PATCH] fix: typing emoji (#2824)

This changes sendCharacter to use document.execCommand instead of sending a `'char'` event from the protocol. This is more aligned with how input would come in from emoji keyboards, and removes the 3ish byte limit on characters that can be sent which prevented larger emoji from being rendered correctly.

Emoji will still fail to type correctly if typing them into an iframe that is in shadow dom.

fixes #1096
---
 lib/Input.js       |  8 +-------
 test/input.spec.js | 13 +++++++++++++
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/lib/Input.js b/lib/Input.js
index 6f2ce2e39dd..72a05d989f2 100644
--- a/lib/Input.js
+++ b/lib/Input.js
@@ -148,13 +148,7 @@ class Keyboard {
    * @param {string} char
    */
   async sendCharacter(char) {
-    await this._client.send('Input.dispatchKeyEvent', {
-      type: 'char',
-      modifiers: this._modifiers,
-      text: char,
-      key: char,
-      unmodifiedText: char
-    });
+    await this._client.send('Input.insertText', {text: char});
   }
 
   /**
diff --git a/test/input.spec.js b/test/input.spec.js
index a50c6b7624c..9505b06cc4e 100644
--- a/test/input.spec.js
+++ b/test/input.spec.js
@@ -472,6 +472,19 @@ module.exports.addTests = function({testRunner, expect, DeviceDescriptors}) {
       error = await page.keyboard.press('😊').catch(e => e);
       expect(error && error.message).toBe('Unknown key: "😊"');
     });
+    it('should type emoji', async({page, server}) => {
+      await page.goto(server.PREFIX + '/input/textarea.html');
+      await page.type('textarea', '👹 Tokyo street Japan 🇯🇵');
+      expect(await page.$eval('textarea', textarea => textarea.value)).toBe('👹 Tokyo street Japan 🇯🇵');
+    });
+    it('should type emoji into an iframe', async({page, server}) => {
+      await page.goto(server.EMPTY_PAGE);
+      await utils.attachFrame(page, 'emoji-test', server.PREFIX + '/input/textarea.html');
+      const frame = page.frames()[1];
+      const textarea = await frame.$('textarea');
+      await textarea.type('👹 Tokyo street Japan 🇯🇵');
+      expect(await frame.$eval('textarea', textarea => textarea.value)).toBe('👹 Tokyo street Japan 🇯🇵');
+    });
     function dimensions() {
       const rect = document.querySelector('textarea').getBoundingClientRect();
       return {