electron: Backspace can not erase the last one character during Japanese IME conversion (macOS)

Electron version: 1.6.2, 1.6.6, not 1.4.16
Operating system: macOS 10.12.2 Sierra, macOS 10.12.4

Expected behavior

When inputting Japanese sentences using the Japanese IME (Input Method Editor) to convert alphabets to Japanese (CJK) characters you should be able to delete each character in turn by pressing backspace

Actual behavior

The very last character always needs two backspace presses

How to reproduce

Clone my version of electron starter

$ git clone https://github.com/wavebox/electron-quick-start -b japanese_delete_bug
$ npm install
$ npm start

Go to System preferences > Language & Region
Press the + to add a language and add Japanese (about a whole scroll down for me)
When prompted use your current language as the primary language
Launch the repository clone of quickstart (above)
Using the flag icon in the mac top bar change your current input method to Katakana
Click in the input field, type a few characters, then start hitting backspace
To delete the last character you have to hit backspace twice

Some other things about this I’ve found…

Remove the webview tag from the page and it works as expected (input field is not within the webview, but does also affect it there)
Issue is reproducible in 1.6.2 & 1.6.6 (maybe others inbetween)
Issue not apparent in 1.4.16
Some gifs of the behaviour in the original issue

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 20
Comments: 19 (7 by maintainers)

Most upvoted comments

This will be fixed in the next Electron release, 1.7.2

+60

kevinsawicki on May 22, 2017

I reported a related issue upstream where when the input is inside the <webview> tag, two backspaces are required to delete the last character, https://bugs.chromium.org/p/chromium/issues/detail?id=714771

+10

kevinsawicki on Apr 24, 2017

I’m having a hard time understanding the status of this issue. As far as i can tell this is fixed in 1.6.x, broken in 1.7.x, and ideally will be fixed again in 1.8.x? Is that correct?

gerges-zz on Oct 12, 2017

Yes, we really need this to be fixed, pls make it happen in 1.8.x if possible, plsssssssssss 🙇

zoubingwu on Apr 11, 2018

This seems to be affecting the current releases of Slack, Microsoft Teams, and some other Electron-based apps. Subscribing this issue with hopes to be fixed soon!

achimnol on Jul 17, 2017

I’m in trouble with this issue, too. I see that this issue has been fixed in Electron 2.0 beta which is based on Chromium 61. Is there any plan on an Electron 1.x version based on Chromium 61 or above so that we can fix this issue without any impact of breaking-changed API?

kenan2002 on Apr 11, 2018

You can test this way. My trouble is Chinese IME and this can help me solve this problem on mac.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
  <style>
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    body {
      display: flex;
      flex-direction: column;
    }

    webview {
      flex: 1;
      width: 100%;
    }

    input {
      height: 300px;
    }
  </style>
</head>

<body>
  <textarea rows="10" id="input"></textarea>
  <webview src="https://www.google.com"></webview>
  <script>
    // You can also require other files to run in this process
    require('./renderer.js');
    const { exec, spawn } = require('child_process');

    const $input = document.querySelector('#input');
    let inputTimeStamp = 0;
    let inputNums = 0;
    let delta = 1;
    let backspaceKeydownTimestamp = 0;
    $input.addEventListener('input', (e) => {
      inputTimeStamp = e.timeStamp;
      inputNums += delta;
    });
    $input.addEventListener('keyup', (e) => {
      if (e.key === 'Backspace') {
        let deleteFlag = false;
        // slow delete detect
        if (inputTimeStamp === -1) {
          deleteFlag = true;
          delta = 1;
          inputTimeStamp = 0;
          exexDelete();
        }
        // quick delete detect
        if (!deleteFlag && inputNums === 1 && e.timeStamp - backspaceKeydownTimestamp < 60) {
          inputNums = 0;
          exexDelete();
        }
      }
      inputTimeStamp = -1;
    });
    $input.addEventListener('keydown', (e) => {
      if (e.key === 'Backspace') {
        backspaceKeydownTimestamp = e.timeStamp;
        delta = -1;
      } else {
        delta = 1;
      }
    });
    $input.addEventListener('compositionstart', () => {
      inputTimeStamp = 0;
      inputNums = 0;
      delta = 1;
      backspaceKeydownTimestamp = 0;
    });
    function exexDelete() {
      const ps = spawn('osascript');
      ps.stdin.write(`
      tell application "System Events"
        keystroke ascii character 8
      end tell
      `);
      ps.stdin.end();
    }
  </script>
</body>

</html>

chenerzhang on Jan 26, 2018

The fix is between 3.0.0-beta.5 and 3.0.0-beta.6

tete1030 on Dec 5, 2018

I have encountered the same problem in this version 1.7.11. The language is Chinese.

zjfjiayou on Jan 29, 2018