disable blur by pressing enter when compositioning (#1224)

Author: akadateppei

packages/material-react-table/src/components/inputs/MRT_EditCellTextField.tsx

@@ -42,6 +42,7 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
   const isEditing = editingRow?.id === row.id;
 
   const [value, setValue] = useState(() => cell.getValue<string>());
+  const [completesComposition, setCompletesComposition] = useState(true);
 
   const textFieldProps: TextFieldProps = {
     ...parseFromValuesOrFunc(muiEditTextFieldProps, {
@@ -94,7 +95,7 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
 
   const handleEnterKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     textFieldProps.onKeyDown?.(event);
-    if (event.key === 'Enter' && !event.shiftKey) {
+    if (event.key === 'Enter' && !event.shiftKey && completesComposition) {
       editInputRefs.current[column.id]?.blur();
     }
   };
@@ -164,6 +165,8 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
         textFieldProps?.onClick?.(e);
       }}
       onKeyDown={handleEnterKeyDown}
+      onCompositionStart={() => setCompletesComposition(false)}
+      onCompositionEnd={() => setCompletesComposition(true)}
     >
       {textFieldProps.children ??
         selectOptions?.map((option) => {