github/puppeteer
0
0
Fork 0
mirror of https://github.com/puppeteer/puppeteer synced 2024-06-14 14:02:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: typing emoji (#2824)

Browse Source 
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
This commit is contained in:
Joel Einbinder 2018-07-31 11:22:26 -07:00 committed by Andrey Lushnikov
parent 1931cb479e
commit 3335d369d3
2 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
lib/Input.js
View File

@ -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});
}
/**

13
test/input.spec.js
View File

@ -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 {