Passing Formik Props to InstantSearch?

Greetings,
I’m building an Typescipt app at the moment that needed to include auto-complete for several forms I’m making. Most of the forms are already build using Formik so I’ve spent most of the day trying to integrate react-instantsearch with it. Currently, I have the following:

        {(RegisterPlant) => (
          <Formik
            onSubmit={async (data, { setErrors }) => {
              try {             
                console.log(data);
              } catch (error) {
                console.log("error:", error.graphQLErrors);
                setErrors(error.graphQLErrors[0]);
              }
            }}
            initialValues={{
              plantName: "",
              locationId: "",
              speciesId: "",
            }}
          >
            {({ handleSubmit }) => (
              <form onSubmit={handleSubmit}>
                <Field
                  name="plantName"
                  placeholder={"Enter plant name..."}
                  component={InputField}
                />
                <Field
                  name="speciesId"
                  placeholder={"Search Species..."}
                  component={SpeciesSearch}
                />
                <Field
                  name="locationId"
                  placeholder="Select Location..."
                  component={LocationSelect}
                />
                <button type="submit">Add Device</button>
              </form>
            )}
          </Formik>
        )}
      </RegisterPlantComponent>

With the Algolia indexed query being linked to the SpeciesSearch which is as follows:

  DetailedHTMLProps,
  useContext,
  InputHTMLAttributes,
} from "react";
import { FieldProps } from "formik";
import { AuthContext } from "../auth/Auth";
import algoliasearch from "algoliasearch/lite";
import {
  InstantSearch,
  connectAutoComplete,
  Configure,
} from "react-instantsearch-dom";

type InputProps = DetailedHTMLProps<
  InputHTMLAttributes<HTMLInputElement>,
  HTMLInputElement
>;

const searchClient = algoliasearch(
  "XXXXX",
  "XXXXXXXXX"
);

export const SpeciesSearch = ({
  field,
  form: _,
  ...props
}: FieldProps & InputProps) => {
  const { currentUser } = useContext(AuthContext);
  if (!currentUser) {
    return <p>Not Signed In!</p>;
  }
  return (
    <InstantSearch
      indexName="XXXX"
      searchClient={searchClient}
      onSearchStateChange={(ref) => console.log(ref.query)}
    >
      <AutoSuggest />
      <Configure hitsPerPage={4} />
    </InstantSearch>
  );
};

const AutoSuggest = connectAutoComplete(
  ({ currentRefinement, hits, refine }, { field }) => {
    return (
      <div>
        <ul>
          <li>
            <input
              {...field}
              name="speciesId"
              value={currentRefinement}
              onChange={(event) => refine(event.currentTarget.value)}
            />
          </li>
          {hits.map((i) => (
            <li onClick={() => refine(i.pid)}>
              <img style={{ width: 50 }} src={i.image} alt={i.display_pid} />
              {i.pid}
            </li>
          ))}
        </ul>
      </div>
    );
  }
);

Normally, I would pass in the field and form props to the <input> like so <input {...field} {...props} /> but What I’m stuck on is that I can’t pass these props down through the connectAutoComplete() as its not on the type. Even when I try to create a combined type as I do for Type InputProps it still won’t accept anything I’ve tried.

If anyone has any experience making Formik, Typescript and React-InstantSearch play nicely together I would love some direction on this. Thanks and hope someone can help!

Hi there,
You need to pass the extra data to the first argument of connectAutoComplete.

If you look at the example above,

<Autocomplete
  greeting="Hello"
  onSuggestionSelected={this.onSuggestionSelected}
  onSuggestionCleared={this.onSuggestionCleared}
/>
// Autocomplete.js

class AutoComplete extends Component {
  // ...
  render() {
    <p>{this.props.greeting}</p>
  }
}

export default connectAutoComplete(AutoComplete);

Let me know how it goes :slight_smile: