From 13cb0841db12f8301c6bb142fb7f8e01d0e0b617 Mon Sep 17 00:00:00 2001
From: smallstall001 <cakbj001@gmail.com>
Date: Sun, 28 Jan 2024 19:57:29 +0900
Subject: [PATCH] added a table option for IME input

---
 .../inputs/MRT_EditCellTextInput.tsx          |  2 +-
 packages/mantine-react-table/src/types.ts     |  1 +
 .../stories/features/Editing.stories.tsx      | 48 +++++++++++++++++++
 3 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx b/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx
index 554fcaeed..573e35657 100644
--- a/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx
+++ b/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx
@@ -69,7 +69,7 @@ export const MRT_EditCellTextInput = <TData extends MRT_RowData>({
 
   const handleEnterKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     textInputProps.onKeyDown?.(event);
-    if (event.key === 'Enter') {
+    if (event.key === 'Enter' && table.options.enableIMEMode !== true) {
       editInputRefs.current[cell.id]?.blur();
     }
   };
diff --git a/packages/mantine-react-table/src/types.ts b/packages/mantine-react-table/src/types.ts
index 631694fa2..575b12500 100644
--- a/packages/mantine-react-table/src/types.ts
+++ b/packages/mantine-react-table/src/types.ts
@@ -829,6 +829,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
   enableFullScreenToggle?: boolean;
   enableGlobalFilterModes?: boolean;
   enableGlobalFilterRankedResults?: boolean;
+  enableIMEMode?: boolean;
   enablePagination?: boolean;
   enableRowActions?: boolean;
   enableRowDragging?: boolean;
diff --git a/packages/mantine-react-table/stories/features/Editing.stories.tsx b/packages/mantine-react-table/stories/features/Editing.stories.tsx
index dcc89bb70..d97dd5ec3 100644
--- a/packages/mantine-react-table/stories/features/Editing.stories.tsx
+++ b/packages/mantine-react-table/stories/features/Editing.stories.tsx
@@ -308,6 +308,54 @@ export const EditingEnabledEditModeCustom = () => {
   );
 };
 
+export const EditingEnabledEditModeWithIMEInput = () => {
+  const [tableData, setTableData] = useState(data);
+  const handleSaveRow: MRT_TableOptions<Person>['onEditingRowSave'] = ({
+    exitEditingMode,
+    row,
+    values,
+  }) => {
+    tableData[row.index] = values;
+    setTableData([...tableData]);
+    exitEditingMode();
+  };
+
+  const columns = [
+    {
+      accessorKey: 'firstName',
+      header: 'First Name',
+    },
+    {
+      accessorKey: 'lastName',
+      header: 'Last Name',
+    },
+    {
+      accessorKey: 'address',
+      header: 'Address',
+    },
+    {
+      accessorKey: 'state',
+      header: 'State',
+    },
+    {
+      accessorKey: 'phoneNumber',
+      enableEditing: false,
+      header: 'Phone Number',
+    },
+  ];
+
+  return (
+    <MantineReactTable
+      columns={columns}
+      data={tableData}
+      enableEditing
+      enableIMEMode
+      enableRowNumbers
+      onEditingRowSave={handleSaveRow}
+    />
+  );
+};
+
 export const CustomEditModal = () => {
   const [tableData, setTableData] = useState(data);