add input click away blur

lama_cleaner/app/src/components/Header/PromptInput.tsx

@@ -1,4 +1,5 @@
-import React, { FormEvent, useState } from 'react'
+import React, { FormEvent, useRef, useState } from 'react'
+import { useClickAway } from 'react-use'
 import { useRecoilState } from 'recoil'
 import emitter, { EVENT_PROMPT } from '../../event'
 import { appState, propmtState } from '../../store/Atoms'
@@ -9,6 +10,7 @@ import TextInput from '../shared/Input'
 const PromptInput = () => {
   const [app, setAppState] = useRecoilState(appState)
   const [prompt, setPrompt] = useRecoilState(propmtState)
+  const ref = useRef(null)
 
   const handleOnInput = (evt: FormEvent<HTMLInputElement>) => {
     evt.preventDefault()
@@ -23,9 +25,17 @@ const PromptInput = () => {
     }
   }
 
+  useClickAway<MouseEvent>(ref, () => {
+    if (ref?.current) {
+      const input = ref.current as HTMLInputElement
+      input.blur()
+    }
+  })
+
   return (
     <div className="prompt-wrapper">
       <TextInput
+        ref={ref}
         value={prompt}
         onInput={handleOnInput}
         placeholder="I want to repaint of..."

lama_cleaner/app/src/components/Settings/NumberInputSetting.tsx

@@ -1,4 +1,5 @@
-import React from 'react'
+import React, { useRef } from 'react'
+import { useClickAway } from 'react-use'
 import NumberInput from '../shared/NumberInput'
 import SettingBlock from './SettingBlock'
 
@@ -27,6 +28,15 @@ function NumberInputSetting(props: NumberInputSettingProps) {
     disable,
   } = props
 
+  const ref = useRef(null)
+
+  useClickAway<MouseEvent>(ref, () => {
+    if (ref?.current) {
+      const input = ref.current as HTMLInputElement
+      input.blur()
+    }
+  })
+
   return (
     <SettingBlock
       className="sub-setting-block"
@@ -47,6 +57,7 @@ function NumberInputSetting(props: NumberInputSettingProps) {
             value={value}
             disabled={disable}
             onValue={onValue}
+            ref={ref}
           />
           {suffix && <span>{suffix}</span>}
         </div>

lama_cleaner/app/src/components/shared/Input.tsx

@@ -1,11 +1,12 @@
-import React, { FocusEvent, InputHTMLAttributes } from 'react'
+import React, { FocusEvent, InputHTMLAttributes, RefObject } from 'react'
+import { useClickAway } from 'react-use'
 import { useRecoilState } from 'recoil'
 import { appState } from '../../store/Atoms'
 
 const TextInput = React.forwardRef<
   HTMLInputElement,
   InputHTMLAttributes<HTMLInputElement>
->((props: InputHTMLAttributes<HTMLInputElement>, forwardedRef) => {
+>((props, ref) => {
   const { onFocus, onBlur, ...itemProps } = props
   const [_, setAppState] = useRecoilState(appState)
 
@@ -26,7 +27,7 @@ const TextInput = React.forwardRef<
   return (
     <input
       {...itemProps}
-      ref={forwardedRef}
+      ref={ref}
       type="text"
       onFocus={handleOnFocus}
       onBlur={handleOnBlur}