Fix child being added twice (#612)

* Remove  event listener from input if cancel or submit key was pressed.

* Configurable onBlur behavior of Input component. Remove document click listener from Input component. Use BlurBehavior.CANCEL in composite inspector.

* Remove BlurBehavior.SUBMIT.

* Saner onBlur.

* onBlur callback for Input component.

packages/@dcl/inspector/src/components/Input/Input.tsx

@@ -7,7 +7,7 @@ import './Input.css'
 const submittingKeys = new Set(['Enter'])
 const cancelingKeys = new Set(['Escape', 'Tab'])
 
-const Input = ({ value, onCancel, onSubmit, onChange, placeholder }: PropTypes) => {
+const Input = ({ value, onCancel, onSubmit, onChange, onBlur, placeholder }: PropTypes) => {
   const ref = useRef<HTMLInputElement>(null)
   const [stateValue, setStateValue] = useState(value)
 
@@ -17,24 +17,18 @@ const Input = ({ value, onCancel, onSubmit, onChange, placeholder }: PropTypes)
 
     const getValue = () => ref.current?.value || value
 
-    const onBodyClick = (e: MouseEvent) => {
-      if (e.target !== ref.current) onSubmit && onSubmit(getValue())
-    }
-
     const onKeyUp = (e: KeyboardEvent) => {
       if (cancelingKeys.has(e.key)) onCancel && onCancel()
       if (submittingKeys.has(e.key)) onSubmit && onSubmit(getValue())
     }
 
-    const onBlur = (_: Event) => onSubmit && onSubmit(getValue())
+    const onBlurCallback = (e: FocusEvent) => { onBlur && onBlur(e) }
 
-    document.body.addEventListener('click', onBodyClick)
     ref.current?.addEventListener('keyup', onKeyUp)
-    ref.current?.addEventListener('blur', onBlur)
+    ref.current?.addEventListener('blur', onBlurCallback)
     return () => {
-      document.body.removeEventListener('click', onBodyClick)
       ref.current?.removeEventListener('keyup', onKeyUp)
-      ref.current?.removeEventListener('blur', onBlur)
+      ref.current?.removeEventListener('blur', onBlurCallback)
     }
   }, [])
 

packages/@dcl/inspector/src/components/Input/types.ts

@@ -1,7 +1,8 @@
 export interface PropTypes {
   value: string
   placeholder?: string
-  onChange?(value: string): void
+  onChange?: (value: string) => void
   onCancel?: () => void
   onSubmit?: (newValue: string) => void
+  onBlur?: (event: FocusEvent) => void
 }

packages/@dcl/inspector/src/components/Tree/Tree.tsx

@@ -153,7 +153,7 @@ function Tree<T>(_props: Props<T>) {
           )}
         </div>
         <TreeChildren {...props} />
-        {insertMode && <Input value="" onCancel={quitInsertMode} onSubmit={handleAddChild} />}
+        {insertMode && <Input value="" onCancel={quitInsertMode} onSubmit={handleAddChild} onBlur={quitInsertMode}/>}
       </div>
     )
   })