From 22dff8797108d3e125ed0a0e0abbb5a4c826c9a5 Mon Sep 17 00:00:00 2001
From: Rodrigo <monstawoodwow@gmail.com>
Date: Fri, 30 Oct 2020 15:24:07 +0000
Subject: [PATCH] Exposing on grid api (clearFocus) to enable outsideDeselect
 imperatively

---
 src/ApolloSpreadsheet.tsx | 25 +++++++++++++++----------
 src/api/types/coreApi.ts  |  5 +++++
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/ApolloSpreadsheet.tsx b/src/ApolloSpreadsheet.tsx
index 0666b09..9407551 100644
--- a/src/ApolloSpreadsheet.tsx
+++ b/src/ApolloSpreadsheet.tsx
@@ -21,6 +21,7 @@ import { ApolloSpreadsheetProps } from './ApolloSpreadsheetProps'
 import { useSort } from './sort/useSort'
 import { useLogger } from './logger'
 import { isFunctionType } from './helpers'
+import { useApiExtends } from './api'
 
 const useStyles = makeStyles(() => ({
 	root: {
@@ -91,6 +92,16 @@ export const ApolloSpreadSheet = forwardRef(
 			apiRef,
 			initialised,
 		})
+		const clearFocus = useCallback(() => {
+			if (gridFocused) {
+				logger.debug('Grid clearFocus() invoked')
+				setGridFocused(false)
+				apiRef.current.selectCell({
+					rowIndex: -1,
+					colIndex: -1,
+				})
+			}
+		}, [apiRef, gridFocused, logger])
 
 		const onClickAway = useCallback(
 			(event: React.MouseEvent<Document>) => {
@@ -102,23 +113,16 @@ export const ApolloSpreadSheet = forwardRef(
 					props.outsideClickDeselects(event.target as HTMLElement)
 				) {
 					logger.debug('Grid click away detected.')
-					setGridFocused(false)
-					return apiRef.current.selectCell({
-						rowIndex: -1,
-						colIndex: -1,
-					})
+					return clearFocus()
 				}
 
 				if (props.outsideClickDeselects) {
 					logger.debug('Grid click away detected.')
 					setGridFocused(false)
-					apiRef.current.selectCell({
-						rowIndex: -1,
-						colIndex: -1,
-					})
+					clearFocus()
 				}
 			},
-			[gridFocused, props, logger, apiRef],
+			[gridFocused, props, logger, clearFocus],
 		)
 
 		// Detect if any element is clicked again to enable focus
@@ -131,6 +135,7 @@ export const ApolloSpreadSheet = forwardRef(
 
 		useApiEventHandler(apiRef, CELL_CLICK, onCellMouseHandler)
 		useApiEventHandler(apiRef, CELL_DOUBLE_CLICK, onCellMouseHandler)
+		useApiExtends(apiRef, { clearFocus }, 'CoreApi')
 
 		return (
 			<ClickAwayListener onClickAway={onClickAway}>
diff --git a/src/api/types/coreApi.ts b/src/api/types/coreApi.ts
index 5940b9b..d434a04 100644
--- a/src/api/types/coreApi.ts
+++ b/src/api/types/coreApi.ts
@@ -31,4 +31,9 @@ export interface CoreApi extends EventEmitter {
 	 * @param args
 	 */
 	dispatchEvent: (name: string, ...args: any[]) => void
+
+	/**
+	 * Removes the focus from the grid and wipes the highlight
+	 */
+	clearFocus(): void
 }