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 = ({ const handleEnterKeyDown = (event: KeyboardEvent) => { 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 = 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['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 ( + + ); +}; + export const CustomEditModal = () => { const [tableData, setTableData] = useState(data);