fix: multiselect was not saving values when it had no focus (#401)

Author: alessandrojcm

packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx

@@ -164,9 +164,12 @@ export const MRT_EditCellTextInput = <TData extends MRT_RowData>({
         value={value}
         {...(selectProps as MRT_MultiSelectProps)}
         onBlur={handleBlur}
-        onChange={(value) => {
+        onChange={(newValue) => {
           (selectProps as MRT_MultiSelectProps).onChange?.(value as any);
-          setValue(value);
+          setValue(newValue);
+          // Save if not in focus, otherwise it will be handled by onBlur
+          if (document.activeElement === editInputRefs.current[cell.id]) return;
+          saveInputValueToRowCache(newValue as any);
         }}
         onClick={(e) => {
           e.stopPropagation();

packages/mantine-react-table/stories/features/Editing.stories.tsx

@@ -421,6 +421,30 @@ export const EditMultiSelectVariant = () => {
   );
 };
 
+export const EditMultiSelectVariantModal = () => {
+  const [tableData, setTableData] = useState(data);
+
+  const handleSaveRow: MRT_TableOptions<Person>['onEditingRowSave'] = ({
+    exitEditingMode,
+    row,
+    values,
+  }) => {
+    tableData[+row.index] = values;
+    setTableData([...tableData]);
+    exitEditingMode();
+  };
+
+  return (
+    <MantineReactTable
+      columns={multiSelectColumns}
+      data={tableData}
+      enableEditing
+      enableRowActions
+      onEditingRowSave={handleSaveRow}
+    />
+  );
+};
+
 export const EditSelectVariant = () => {
   const [tableData, setTableData] = useState(data);