How do you use useFetcher inside a form?

[jansedlon]

Hi. Image you have a Form. That form is used to create a post (for example). Inside that form I need a an autocomplete which searches for users when typed. I can't use useFetcher because I would end up with 2 nested forms and that invalid behaviour. Anyone came across this?

[sergiodxa]

The useFetcher hook is exactly for that, but instead of rendering the fetcher.Form component you call the fetcher.load method and access the result with fetcher.data, then you use that to render the autocomplete options.

The route you fetch with useFetcher can by an UI route or a resource route, if it's only to show autocomplete suggestions it would be simpler to create a resource route by only exporting the loader.

[mdrahiem]

Thanks for the answer. It works great except the fetcher.loading state is true in both fetcher's case which is causing the spinner to show in both buttons even only one (submit) button is clicked to submit fetcher. How can I solve this issue?

[gustavopch]

Assuming your buttons look like:

<button name="intent" value="do-something">Do something</button>
<button name="intent" value="do-something-else">Do something else</button>

you could check which button was clicked with fetcher.formData.get('intent').

[mdrahiem]

Thanks for your reply. I have different api routes for this case, so identifying the intent is not a problem. My issue here is

<div className="flex flex-col gap-8 p-8">
  <div>
  <input
    name="Origin"
    type="text"
  />
  </div>
  <div>
  <input
    name="Destination"
    type="text"
  />
  </div>
  <div>
    <select className="select-bordered select w-64 md:w-96" name="serviceCode" disabled={serviceCodes.length === 0} ref={serviceCodesRef}>
      <option hidden></option>
      {serviceCodes.length > 0 &&
        serviceCodes.map(serviceCode => (
          <option value={serviceCode} key={serviceCode}>
            {serviceCode}
          </option>
        ))}
    </select>
    </div>
    <div>
      <button name="intent" value="fetcher2" onClick={doSomething} className="btn-primary btn w-full rounded-sm">
        {fetcher2.state === 'loading' ? <span className="loading"></span> : 'Get Service Codes'}
      </button>
    </div>
  </div>
  <div>
    <button className="btn-primary btn w-full rounded-sm" onClick={calculateEmissions}>
      {fetcher1.state === 'loading' ? <span className="loading"></span> : 'Get Search Results'}
    </button>
  </div>
</div>

When "Get Service Codes" button is clicked, I do see the spinner in both buttons even though the fetcher.loading is different for both buttons. Both handle clicks call different api routes (fetcher.load). Also one point to note here, "Get Service Codes" button is inside "Get Search Results" form which fetches only "service codes" but "Get Search Results" form fetches search results using the data from "Get Service codes" form. I hope I am clear. 😓

[mdrahiem]

So the problem is solved by changing the button type to "submit" for the main form and "button" to the inside forms. As the button's default type is "submit" its like i have multiple submit buttons on the page and every button click triggering the submit of the main form. that's why I was seeing the loader everywhere. Thanks everyone for your help.