Add a table option for IME input

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();
     }
   };

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;

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);