Placeholder remains using Japanese IME and style bold

[smura]

The placeholder remains while using Japanese IME and style bold.

Steps for Reproduction

1. Visit quilljs.com Interactive Playground
2. Click and focus on the editor
3. Enable font style bold using toolbar
4. Set mode to Hiragana with Japanese IME (IME toolbar shows "あ")
5. Type "aaa" (Do not type Enter key)

Expected behavior:

• The placeholder disappears.

Actual behavior:

• The placeholder remains.

Platforms:

• Google Chrome 68.0.3440.106
• Windows 7
• Microsoft IME 10.1.7601.0

Version:

1.3.6

[smura]

Solution

https://codepen.io/anon/pen/qyLyqz

The following code solves this problem.

JavaScript:

$(document).on('compositionstart', '.ql-editor', function() {
  $(this).addClass('ql-composition');
});
$(document).on('compositionend', '.ql-editor', function() {
  $(this).removeClass('ql-composition');
});

CSS:

.ql-editor.ql-composition::before {
  visibility: hidden;
}

Note

I recommend do not use display: none insted of visibility: hidden. The issue #1453 will get worse.

[quill-bot]

Quill 2.0 has been released (announcement post) with many changes and fixes. If this is still an issue please create a new issue after reviewing our updated Contributing guide 🙏