From bdcdb09162520dfef4f1a54f974682836057cd04 Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Fri, 9 Jul 2021 21:39:29 +0100
Subject: [PATCH] Fixes "done" key on iOS

---
 hooks/useCanvasEvents.ts | 15 ++++++++++++++-
 state/state.ts           |  6 +++---
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/hooks/useCanvasEvents.ts b/hooks/useCanvasEvents.ts
index e1a486adc..55aca9fbb 100644
--- a/hooks/useCanvasEvents.ts
+++ b/hooks/useCanvasEvents.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { MutableRefObject, useCallback } from 'react'
+import { MutableRefObject, useCallback, useEffect } from 'react'
 import state from 'state'
 import {
   fastBrushSelect,
@@ -74,6 +74,19 @@ export default function useCanvasEvents(
     // }
   }, [])
 
+  // Send event on iOS when a user presses the "Done" key while editing a text element
+  useEffect(() => {
+    function handleFocusOut() {
+      state.send('BLURRED_EDITING_SHAPE')
+    }
+
+    document.addEventListener('focusout', handleFocusOut)
+
+    return () => {
+      document.removeEventListener('focusout', handleFocusOut)
+    }
+  }, [])
+
   return {
     onPointerDown: handlePointerDown,
     onPointerMove: handlePointerMove,
diff --git a/state/state.ts b/state/state.ts
index 01ffed47b..0bad830ab 100644
--- a/state/state.ts
+++ b/state/state.ts
@@ -679,8 +679,8 @@ const state = createState({
               },
             ],
             BLURRED_EDITING_SHAPE: [
-              { unless: 'isEditingShape' },
               {
+                unless: 'isEditingShape',
                 get: 'editingShape',
                 if: 'shouldDeleteShape',
                 do: ['cancelSession', 'deleteSelection'],
@@ -688,8 +688,8 @@ const state = createState({
               { to: 'selecting' },
             ],
             POINTED_CANVAS: [
-              { unless: 'isEditingShape' },
               {
+                unless: 'isEditingShape',
                 get: 'editingShape',
                 if: 'shouldDeleteShape',
                 do: ['cancelSession', 'deleteSelection'],
@@ -697,8 +697,8 @@ const state = createState({
               { to: 'selecting' },
             ],
             CANCELLED: [
-              { unless: 'isEditingShape' },
               {
+                unless: 'isEditingShape',
                 get: 'editingShape',
                 if: 'shouldDeleteShape',
                 do: ['cancelSession', 'deleteSelection'],