Provide callback prop for onBlur

Author: iddan

src/Spreadsheet.tsx

@@ -36,6 +36,7 @@ import {
   getCellRangeValue,
   getCellValue,
   shouldHandleClipboardEvent,
+  isFocusedWithin,
 } from "./util";
 import reducer, { INITIAL_STATE, hasKeyDownHandler } from "./reducer";
 import context from "./context";
@@ -105,6 +106,8 @@ export type Props<CellType extends Types.CellBase> = {
   onSelect?: (selected: Point.Point[]) => void;
   /** Callback called when Spreadsheet's active cell changes. */
   onActivate?: (active: Point.Point) => void;
+  /** Callback called when the Spreadsheet loses focus */
+  onBlur?: () => void;
   onCellCommit?: (
     prevCell: null | CellType,
     nextCell: null | CellType,
@@ -137,6 +140,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     onModeChange = () => {},
     onSelect = () => {},
     onActivate = () => {},
+    onBlur = () => {},
     onCellCommit = () => {},
   } = props;
   const initialState = React.useMemo(
@@ -223,15 +227,24 @@ const Spreadsheet = <CellType extends Types.CellBase>(
       onSelect(points);
     }
 
-    if (state.active !== prevState.active && state.active) {
-      onActivate(state.active);
+    if (state.active !== prevState.active) {
+      if (state.active) {
+        onActivate(state.active);
+      } else {
+        const root = rootRef.current;
+        if (root && isFocusedWithin(root) && document.activeElement) {
+          (document.activeElement as HTMLElement).blur();
+        }
+        onBlur();
+      }
     }
 
     prevStateRef.current = state;
   }, [
     props.data,
     state,
     onActivate,
+    onBlur,
     onCellCommit,
     onChange,
     onModeChange,
@@ -330,7 +343,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     (event) => {
       const { currentTarget } = event;
       setTimeout(() => {
-        if (!currentTarget.matches(":focus-within")) {
+        if (!isFocusedWithin(currentTarget)) {
           blur();
         }
       }, 0);