HANSONTABLEの２バイト入力への対応
ハンズオンはブラウザ上に表形式のインターフェイスを提供するありがたい部位です。
これを使用するにあたり、日本特有である日本語入力時の不具合があり
かなりハマったので、備忘録として残しておきます。
まずはハンズオンテーブルとは・・
https://handsontable.com/
JavaScript data grid that looks
and feels like a spreadsheet.
Minimalistic, Excel-like grid component for web apps.
Available for pure JavaScript, React, Vue, and Angular.
問題点
そもそも英語圏の部品なので、日本のように全角半角がある場合の対処ができていない。
現象
ハンズオンで表示したテーブルのセル（テキスト）に対して、フォーカスを当てただけの状態で、ＩＭＥをＯＮ（日本語入力）した際、最初の１文字が入力されない。
| col1 | col2 | col3 |
|---|---|---|
| inputText | readonly | dropdown |
| inputText | readonly | dropdown |
上記でcol1のinputTextにフォーカスだけを当て、「あいう」と入力すると
実際にセットされる値は「いう」となる。
ＩＭＥＯＦＦの場合は問題なく動作します。
「abc」と入力するとそのまま「abc」とセットされます。
ちなみに、セルをダブルクリックし、入力モードにすると日本語でも問題ありません。
解決策
色々考えた結果、フォーカスだけが当たった状態をなくしました。
afterSelectionEnd: function (r, c, r2, c2) {
//単一セルが選択されたとき
if (r != r2 || c != c2) {return;}
//セルエディタが'textEditor'のみ強制的に入力モードにする
//あらかじめ入力テキストのEditorをそろえて
var celleditor = this.getCellEditor(r, c)
if (celleditor == null) {return;}
if (this.getCellMeta(r, c).readOnly) {return;}
if (celleditor != 'textEditor') {return;}
//強制入力モード
var acteditor = this.getActiveEditor();
var cellval = this.getValue();
acteditor.beginEditing();
this.setDataAtCell(r, c, cellval, 'system');
}
本来は、acteditor.beginEditing();するだけでよさそうなものでしたが、なぜか入力していた文字が消える現象が発生します。それも、消えるときと消えない時がある・・。
なので
var cellval = this.getValue();
で現在値を取得しておき、強制入力モードにしてから、再度現在値をセットしました。
これで、動き的には違和感がなくなりました。矢印キーでの移動も可能です。
ちなみに、acteditor.enableFullEditMode();を使えばよいという掲示板も見かけましたがそれだとうまく動作しません。
また、afterSelectionのイベントもありますが、afterSelectionEndのイベントでしかうまく動作しませんでした。
たぶん、hansontableを使うと同じ壁にぶつかる人がいてるとおもうので、何かのお役にたてればと思います・・。