※執筆時点のバージョンは0.20.1です。

ExcelライクなグリッドUIライブラリとして良く利用されるHandsontableですが、

以外とバグが多く、公式で放置されていることも多い。それがこのIME問題だ。

公式ページのサンプルを見てもらうとわかるが、

キーボードを全角状態でセルにフォーカスを合わせて(入力状態ではない)、

例えば「てすと」と日本語入力をすると、【tえすと】という感じで

一文字目がアルファベットになってしまう。

公式ページのissuesでもまだ未解決。

ソースをアレコレ解析して試行錯誤・・・。

セルのフォーカス状態(≠入力状態)ではWindowsのIMEが無効(非活性)になっていて、

HTML/Javascriptのソースコード上ではinput type=textが存在していないので

このライブラリでは物理的に無理かもしれない。

・・・なのでEnterボタンで入力状態にする代替で回避することにしました。

handsontable.full.js


BaseEditor.prototype.beginEditing = function(initialValue, event) {
  // ここから
  if (this.instance.getSelected()) {
    if (event.realTarget.className != "handsontableInput" && event.realTarget.className != "copyPaste" && event.keyCode != 13){
      event.preventDefault();
      return;
    }
  }
  // ここまで

Enter以外で入力モードにしたいときは「event.keyCode != 13」を外してください。

＃その場合はEnter以外のKeyを押すとテキストがクリアされます。

いくつかやり方はあったんだけど、

コピペができなくなる・・・とか、内部でカスタマイズした独自機能が動かなくなる・・・とか

対応の影響を受けて動作しなくなる機能があったので結局この方法に落ち着きました。ご参考まで。