Blur prop editors on unmount (#340)

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)

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)