Fix Blur

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(
@@ -195,6 +199,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     (data) => dispatch(Actions.setData(data)),
     [dispatch]
   );
+  const blur = React.useCallback(() => dispatch(Actions.blur()), [dispatch]);
 
   React.useEffect(() => {
     const prevState = prevStateRef.current;
@@ -222,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,
@@ -325,6 +339,18 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     [state, onDragStart, handleMouseUp]
   );
 
+  const handleBlur = React.useCallback(
+    (event) => {
+      const { currentTarget } = event;
+      setTimeout(() => {
+        if (!isFocusedWithin(currentTarget)) {
+          blur();
+        }
+      }, 0);
+    },
+    [blur]
+  );
+
   const formulaParser = React.useMemo(() => {
     return props.formulaParser || new FormulaParser();
   }, [props.formulaParser]);
@@ -460,6 +486,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
         onKeyPress={onKeyPress}
         onKeyDown={handleKeyDown}
         onMouseMove={handleMouseMove}
+        onBlur={handleBlur}
       >
         {tableNode}
         {activeCellNode}
@@ -472,6 +499,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
       onKeyPress,
       handleKeyDown,
       handleMouseMove,
+      handleBlur,
       tableNode,
       activeCellNode,
     ]

src/reducer.test.ts

@@ -101,7 +101,11 @@ describe("reducer", () => {
     ["view", EDIT_STATE, Actions.view(), INITIAL_STATE],
     [
       "blur",
-      { ...INITIAL_STATE, active: Point.ORIGIN },
+      {
+        ...INITIAL_STATE,
+        active: Point.ORIGIN,
+        selected: PointRange.create(Point.ORIGIN, Point.ORIGIN),
+      },
       Actions.blur(),
       INITIAL_STATE,
     ],

src/reducer.ts

@@ -267,7 +267,7 @@ function clear(state: Types.StoreState): Types.StoreState | void {
 }
 
 function blur(state: Types.StoreState): Types.StoreState {
-  return { ...state, active: null };
+  return { ...state, active: null, selected: null };
 }
 
 function view(state: Types.StoreState): Types.StoreState {