@@ -472,34 +532,25 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, onKe
- {({ onKeyDown: userSuggestOnKeyDown, resetSuggestions: resetUserSuggestions }) => (
- {({ onKeyDown: territorySuggestOnKeyDown, resetSuggestions: resetTerritorySuggestions }) => (
+
+ {({ userSuggestOnKeyDown, territorySuggestOnKeyDown, resetUserSuggestions, resetTerritorySuggestions }) => (
{
- setTimeout(resetUserSuggestions, 500)
- setTimeout(resetTerritorySuggestions, 500)
- }}
+ onBlur={() => handleBlur(resetUserSuggestions, resetTerritorySuggestions)}
onDragEnter={onDragEnter}
onDragLeave={onDragLeave}
onDrop={onDrop}
onPaste={onPaste}
className={dragStyle === 'over' ? styles.dragOver : ''}
- />)}
-
- )}
-
+ />
+ )}
+
{tab !== 'write' &&
diff --git a/components/search.js b/components/search.js
index 67c9d23c..249683f9 100644
--- a/components/search.js
+++ b/components/search.js
@@ -1,22 +1,26 @@
import Container from 'react-bootstrap/Container'
import styles from './search.module.css'
import SearchIcon from '@/svgs/search-line.svg'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { Form, Input, Select, DatePicker, SubmitButton } from './form'
+import { useEffect, useMemo, useRef, useState, useCallback } from 'react'
+import {
+ Form,
+ Input,
+ Select,
+ DatePicker,
+ SubmitButton,
+ useDualAutocomplete,
+ DualAutocompleteWrapper
+} from './form'
import { useRouter } from 'next/router'
import { whenToFrom } from '@/lib/time'
import { useMe } from './me'
+import { useField } from 'formik'
export default function Search ({ sub }) {
const router = useRouter()
const [q, setQ] = useState(router.query.q || '')
- const inputRef = useRef(null)
const { me } = useMe()
- useEffect(() => {
- inputRef.current?.focus()
- }, [])
-
const search = async values => {
let prefix = ''
if (sub) {
@@ -63,18 +67,13 @@ export default function Search ({ sub }) {
onSubmit={values => search({ ...values })}
>
-
{
- setQ(e.target.value?.trim())
- }}
+ setOuterQ={setQ}
/>
@@ -135,3 +134,52 @@ export default function Search ({ sub }) {
>
)
}
+
+function SearchInput ({ name, setOuterQ, ...props }) {
+ const [, meta, helpers] = useField(name)
+ const inputRef = useRef(null)
+
+ useEffect(() => {
+ if (meta.value !== undefined) setOuterQ(meta.value.trim())
+ }, [meta.value, setOuterQ])
+
+ const setCaret = useCallback(({ start, end }) => {
+ inputRef.current?.setSelectionRange(start, end)
+ }, [])
+
+ const { userAutocomplete, territoryAutocomplete, handleTextChange, handleKeyDown, handleBlur } = useDualAutocomplete({
+ meta,
+ helpers,
+ innerRef: inputRef,
+ setSelectionRange: setCaret
+ })
+
+ const handleChangeWithOuter = useCallback((formik, e) => {
+ setOuterQ(e.target.value.trim())
+ handleTextChange(e)
+ }, [setOuterQ, handleTextChange])
+
+ return (
+
+
+ {({ userSuggestOnKeyDown, territorySuggestOnKeyDown, resetUserSuggestions, resetTerritorySuggestions }) => (
+ {
+ handleKeyDown(e, userSuggestOnKeyDown, territorySuggestOnKeyDown)
+ }}
+ onBlur={() => handleBlur(resetUserSuggestions, resetTerritorySuggestions)}
+ {...props}
+ />
+ )}
+
+
+ )
+}