From 8c325c901a4db60e3885f2660d61a0d76de9ba16 Mon Sep 17 00:00:00 2001
From: Andrew Prifer <2991360+AndrewPrifer@users.noreply.github.com>
Date: Mon, 21 Nov 2022 19:07:49 +0100
Subject: [PATCH] Blur prop editors on unmount (#340)

---
 .../studio/src/uiComponents/form/BasicNumberInput.tsx  | 10 +++++++++-
 .../studio/src/uiComponents/form/BasicStringInput.tsx  | 10 +++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
index a814463..af4a86e 100644
--- a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
+++ b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
@@ -1,5 +1,6 @@
 import {clamp, isInteger, round} from 'lodash-es'
-import type {MutableRefObject} from 'react'
+import type {MutableRefObject} from 'react';
+import { useEffect} from 'react'
 import {useState} from 'react'
 import React, {useMemo, useRef} from 'react'
 import styled from 'styled-components'
@@ -279,6 +280,13 @@ const BasicNumberInput: React.FC<{
     }
   }, [])
 
+  // Call onBlur on unmount. Because technically it _is_ a blur, but also, otherwise edits wouldn't be committed.
+  useEffect(() => {
+    return () => {
+      callbacks.onBlur()
+    }
+  }, [])
+
   let value =
     stateRef.current.mode !== 'editingViaKeyboard'
       ? format(propsA.value)
diff --git a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx
index be1a808..795e07e 100644
--- a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx
+++ b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx
@@ -1,5 +1,6 @@
 import styled from 'styled-components'
-import type {MutableRefObject} from 'react'
+import type {MutableRefObject} from 'react';
+import { useEffect} from 'react'
 import React, {useMemo, useRef} from 'react'
 import mergeRefs from 'react-merge-refs'
 import useRefAndState from '@theatre/studio/utils/useRefAndState'
@@ -169,6 +170,13 @@ const BasicStringInput: React.FC<{
     }
   }, [])
 
+  // Call onBlur on unmount. Because technically it _is_ a blur, but also, otherwise edits wouldn't be committed.
+  useEffect(() => {
+    return () => {
+      callbacks.onBlur()
+    }
+  }, [])
+
   let value =
     stateRef.current.mode !== 'editingViaKeyboard'
       ? format(props.value)