お世話になっております。
juridon様の記事を参考にsortableを検証しておりましたが、
IME入力の未確定状態で行の入れ替えを行うとエラーになってしまい、原因と改善方法に行き詰っております。
https://qiita.com/juri_don/items/aa9ae57c45e3fc6bd5e4
エラー原因、対策をご教示いただけますと幸いです。
エラー内容↓
エラー箇所↓
(() => {
'use strict';
const table_code = 'table'; // テーブルのフィールドコード
// テーブル更新内容を格納
let resultTableValues = [];
// DOM tbody tr id付与
const setRowNum = () => {
let st = document.querySelector('tbody');
st.id = 'st'; // tbodyにid付与
Array.prototype.forEach.call(st.rows, (e, index) => {
e.id = index; // trにid付与
});
};
// showEvent
kintone.events.on(['app.record.create.show', 'app.record.edit.show'], event => {
const record = event.record;
setRowNum(); // id付与
resultTableValues = record[table_code]['value']; // 初期テーブル内容格納
// ドラッグ & ドロップで入れ替えたら動く
$('#st').sortable({
update: (event, ui) => {
const tmpRows = []; // 並び替え後のテーブル
// 並び替え後の順番にテーブル行を格納
$('#st').sortable('toArray').forEach(elm => {
tmpRows.push(resultTableValues[Number(elm)]);
});
// 並び替え後のテーブルを入れなおす
resultTableValues = tmpRows;
// 画面表示中のレコードの値を更新する
const r = kintone.app.record.get();
// 一回クリアしないとゴミが残る？ようなので一旦クリアする
r.record[table_code]['value'] = [];
kintone.app.record.set(r);
// 画面表示中レコードを並び替え後のテーブルで更新する
r.record[table_code]['value'] = resultTableValues;
kintone.app.record.set(r);
// 並び替えたらDOM操作でid振り直す
setRowNum();
}
});
return event;
});
// table changeEvent
kintone.events.on(['app.record.create.change.' + table_code, 'app.record.edit.change.' + table_code], event => {
const record = event.record;
// <tr>に番号をふりなおす
setRowNum();
// 行追加＆削除したテーブルでresultTableValuesを更新しておく
resultTableValues = record[table_code]['value'];
return event;
});
const events = [
'app.record.create.change.text',
'app.record.edit.change.text',
];
// subtable changeEvent
kintone.events.on(events, event => {
const record = event.record;
setRowNum();
// resultTableValuesをフィールド値更新後の内容にする
resultTableValues = record[table_code]['value'];
$('#st input').bind('click.sortable mousedown.sortable', function (ev) {
ev.target.focus();
});
return event;
});
})();