Blur prop editors on unmount (theatre-js#340)

ehtick · Nov 21, 2022 · 8c325c9 · 8c325c9
1 parent a55a34d
commit 8c325c9
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git 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
@@ -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)