Merge pull request #1359 from nextstrain/feat/web-clear-input-box

nextstrain · Dec 20, 2023 · 9a44a41 · 9a44a41
2 parents 9e5c38b + 7f34c9d
commit 9a44a41
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/packages_rs/nextclade-web/src/components/FilePicker/TabPanelPaste.tsx b/packages_rs/nextclade-web/src/components/FilePicker/TabPanelPaste.tsx
@@ -31,9 +31,19 @@ export function TabPanelPaste({ onConfirm, instructions, inputRef }: TabPanelPas
   const { t } = useTranslationSafe()
   const [seqData, setSeqData] = useState<string>('')
   const hasSeqData = seqData.length > 0
-  const change = useCallback((e: React.ChangeEvent<HTMLInputElement>) => { setSeqData(e.target.value) }, []) // prettier-ignore
-  const clear = useCallback(() => { setSeqData('') }, []) // prettier-ignore
-  const confirm = useCallback(() => { onConfirm(seqData) }, [onConfirm, seqData]) // prettier-ignore
+
+  const change = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setSeqData(e.target.value)
+  }, [])
+
+  const clear = useCallback(() => {
+    setSeqData('')
+  }, [])
+
+  const confirm = useCallback(() => {
+    onConfirm(seqData)
+    clear()
+  }, [onConfirm, seqData, clear])
 
   return (
     <Form>

diff --git a/packages_rs/nextclade-web/src/components/FilePicker/TabPanelUrl.tsx b/packages_rs/nextclade-web/src/components/FilePicker/TabPanelUrl.tsx
@@ -31,9 +31,16 @@ export function TabPanelUrl({ exampleUrl, onConfirm, inputRef }: TabPanelUrlProp
   const { t } = useTranslationSafe()
   const [url, setUrl] = useState<string>('')
   const hasUrl = url.length > 0
-  const change = useCallback((e: React.ChangeEvent<HTMLInputElement>) => { setUrl(e.target.value) }, []) // prettier-ignore
-  const clear = useCallback(() => { setUrl('') }, []) // prettier-ignore
-  const confirm = useCallback(() => { onConfirm(url) }, [onConfirm, url]) // prettier-ignore
+  const change = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setUrl(e.target.value)
+  }, [])
+  const clear = useCallback(() => {
+    setUrl('')
+  }, [])
+  const confirm = useCallback(() => {
+    onConfirm(url)
+    clear()
+  }, [onConfirm, url, clear])
   const placeholder = useMemo(() => t('For example: {{exampleUrl}}', { exampleUrl }), [t, exampleUrl])
   const instructions = t('Enter URL to a file to fetch')