Closed4
mantine-react-tableのeditを日本語(IME)対応にする
smallStallmantine-react-table(MRT)において、セルのeditでIME入力しようとすると、二重入力（「ほげ」が「ほげほげ」になってしまう）現象が見られた。
変換せずに決定する場合に二重入力になり、変換して選択する場合、この現象は見られなかった。
smallStall調査したところ、Enterキーを検出してblurしてしまっているのが原因のようだった。
IMEがない文化においてはEnterキーがセルの入力確定の意味合いになるが、IMEがある文化では、それ以外にIMEの確定の意味合いも持つ。そういったことが関係してなっているらしい。詳しくはわからなかった。
smallStallとりあえずEnter周りを修正すれば良いということがわかった。
すごくざっくりだが、patch-packageでパッチを当てた。
バージョンは2.0.0-alpha.9なので注意されたし。
patches/mantine-react-table+2.0.0-alpha.9.patch
diff --git a/node_modules/mantine-react-table/dist/cjs/index.js b/node_modules/mantine-react-table/dist/cjs/index.js
index 35aee92..efa4b0d 100644
--- a/node_modules/mantine-react-table/dist/cjs/index.js
+++ b/node_modules/mantine-react-table/dist/cjs/index.js
@@ -627,9 +627,6 @@ const MRT_EditCellTextInput = ({ cell, table, }) => {
const handleEnterKeyDown = (event) => {
var _a, _b;
(_a = textInputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(textInputProps, event);
- if (event.key === 'Enter') {
- (_b = editInputRefs.current[cell.id]) === null || _b === void 0 ? void 0 : _b.blur();
- }
};
if (columnDef.Edit) {
return (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table });
diff --git a/node_modules/mantine-react-table/dist/esm/mantine-react-table.esm.js b/node_modules/mantine-react-table/dist/esm/mantine-react-table.esm.js
index 09e6110..c3f90be 100644
--- a/node_modules/mantine-react-table/dist/esm/mantine-react-table.esm.js
+++ b/node_modules/mantine-react-table/dist/esm/mantine-react-table.esm.js
@@ -669,7 +669,7 @@ const MRT_EditCellTextInput = ({ cell, table, }) => {
}
} })));
}
- return (jsx(TextInput, Object.assign({}, commonProps, { onKeyDown: handleEnterKeyDown, value: value !== null && value !== void 0 ? value : '' }, textInputProps, { onBlur: handleBlur, onChange: (event) => {
+ return (jsx(TextInput, Object.assign({}, commonProps, { value: value !== null && value !== void 0 ? value : '' }, textInputProps, { onBlur: handleBlur, onChange: (event) => {
var _a;
(_a = textInputProps.onChange) === null || _a === void 0 ? void 0 : _a.call(textInputProps, event);
setValue(event.target.value);
@@ -2570,7 +2570,7 @@ const MRT_TableHeadCellFilterLabel = ({ header, table, }) => {
input === null || input === void 0 ? void 0 : input.focus();
input === null || input === void 0 ? void 0 : input.select();
}, 100);
- }, children: jsx(IconFilter, {}) })) }) })) }), columnFilterDisplayMode === 'popover' && (jsx(Popover.Dropdown, { onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.key === 'Enter' && setPopoverOpened(false), children: jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }) }))] }) }));
+ }, children: jsx(IconFilter, {}) })) }) })) }), columnFilterDisplayMode === 'popover' && (jsx(Popover.Dropdown, { onClick: (event) => event.stopPropagation(), children: jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }) }))] }) }));
};
const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
MRTが他のバージョンの場合は、node_modulesの中にあるmantine-react-table/dist/esmのファイルからEnterキーに関わる部分を削除すれば、同じように対応可能だと思われる。
あとはpatch-packageを使えば、差分を検出してパッチファイルを作成してくれる。
このスクラップは2023/12/23にクローズされました