feat(formiks): add FormikAutoComplete

.eslintrc.js

@@ -123,6 +123,7 @@ module.exports = {
 
         'import/no-default-export': 'off',
 
+        'react/destructuring-assignment': 'off',
         'react/function-component-definition': 'off',
 
         'sort-keys-fix/sort-keys-fix': 'off'

src/fields/AutoComplete.tsx

@@ -1,5 +1,6 @@
 import ky from 'ky'
-import { useCallback, useMemo, useState } from 'react'
+import { propEq } from 'ramda'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { AutoComplete as RsuiteAutoComplete } from 'rsuite'
 import styled from 'styled-components'
 
@@ -25,6 +26,7 @@ export type AutoCompleteProps = Omit<
   queryUrl?: string
 }
 export function AutoComplete({
+  defaultValue,
   isLabelHidden,
   isLight = false,
   label,
@@ -35,19 +37,24 @@ export function AutoComplete({
   queryUrl,
   ...originalProps
 }: AutoCompleteProps) {
+  const prevDefaultValuePropRef = useRef<string | undefined>(defaultValue)
+
+  const [controlledDefaultValue, setDefaultControlledValue] = useState<string | undefined>(defaultValue)
   const [autoGeneratedOptions, setAutoGeneratedOptions] = useState<Option[]>([])
 
   const controlledOptions = useMemo(() => options ?? autoGeneratedOptions, [autoGeneratedOptions, options])
+  const controlledValueAsLabel = useMemo(() => {
+    const foundOption = controlledOptions.find(propEq('value', controlledDefaultValue))
+
+    return foundOption ? foundOption.label : undefined
+  }, [controlledDefaultValue, controlledOptions])
   const key = useMemo(
-    () => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`,
-    [originalProps.defaultValue, originalProps.name]
+    () => `${originalProps.name}-${JSON.stringify(controlledDefaultValue)}`,
+    [controlledDefaultValue, originalProps.name]
   )
 
   const handleChange = useCallback(
     async (nextQuery: string) => {
-      // console.log(nextQuery)
-      // console.log(nextQuery.length)
-
       if (queryUrl && queryMap) {
         const url = queryUrl.replace('%s', nextQuery)
         const rawData: Record<string, any>[] = await ky.get(url).json()
@@ -71,15 +78,23 @@ export function AutoComplete({
 
   const handleSelect = useCallback(
     (nextValue: string) => {
-      if (!onChange) {
-        return
+      if (onChange) {
+        onChange(nextValue)
       }
 
-      onChange(nextValue)
+      setDefaultControlledValue(nextValue)
     },
     [onChange]
   )
 
+  useEffect(() => {
+    if (defaultValue === prevDefaultValuePropRef.current) {
+      return
+    }
+
+    setDefaultControlledValue(defaultValue)
+  }, [defaultValue])
+
   return (
     <Field>
       <Label htmlFor={originalProps.name} isHidden={isLabelHidden}>
@@ -90,6 +105,7 @@ export function AutoComplete({
         key={key}
         $isLight={isLight}
         data={controlledOptions}
+        defaultValue={controlledValueAsLabel}
         id={originalProps.name}
         onChange={handleChange}
         onSelect={handleSelect}

src/formiks/FormikAutoComplete.tsx

@@ -0,0 +1,27 @@
+import { useField } from 'formik'
+import { useCallback, useEffect, useMemo } from 'react'
+
+import { AutoComplete } from '../fields/AutoComplete'
+
+import type { AutoCompleteProps } from '../fields/AutoComplete'
+
+export type FormikAutoCompleteProps = Omit<AutoCompleteProps, 'defaultValue' | 'onChange'>
+export function FormikAutoComplete({ name, ...originalProps }: FormikAutoCompleteProps) {
+  const [field, , helpers] = useField<string | undefined>(name)
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps, @typescript-eslint/naming-convention
+  const defaultValue = useMemo(() => field.value, [])
+
+  const handleChange = useCallback(
+    (nextValue: string | undefined) => {
+      helpers.setValue(nextValue)
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  )
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => () => helpers.setValue(undefined), [])
+
+  return <AutoComplete defaultValue={defaultValue} name={name} onChange={handleChange} {...originalProps} />
+}

src/index.ts

@@ -28,6 +28,7 @@ export { Select } from './fields/Select'
 export { Textarea } from './fields/Textarea'
 export { TextInput } from './fields/TextInput'
 
+export { FormikAutoComplete } from './formiks/FormikAutoComplete'
 export { FormikCheckbox } from './formiks/FormikCheckbox'
 export { FormikDatePicker } from './formiks/FormikDatePicker'
 export { FormikDateRangePicker } from './formiks/FormikDateRangePicker'
@@ -69,6 +70,7 @@ export type { SelectProps } from './fields/Select'
 export type { TextareaProps } from './fields/Textarea'
 export type { TextInputProps } from './fields/TextInput'
 
+export type { FormikAutoCompleteProps } from './formiks/FormikAutoComplete'
 export type { FormikCheckboxProps } from './formiks/FormikCheckbox'
 export type { FormikDatePickerProps } from './formiks/FormikDatePicker'
 export type { FormikDateRangePickerProps } from './formiks/FormikDateRangePicker'