Cannot get input data from combobox in a form in Remix

[yongzhang]

Hi, there

I was trying the sample code here in Remix:

import { useState } from 'react'
import { Combobox } from '@headlessui/react'
import { Form } from "@remix-run/react";

const people = [
  { id: 1, name: 'Durward Reynolds', unavailable: false },
  { id: 2, name: 'Kenton Towne', unavailable: false },
  { id: 3, name: 'Therese Wunsch', unavailable: false },
  { id: 4, name: 'Benedict Kessler', unavailable: true },
  { id: 5, name: 'Katelyn Rohan', unavailable: false },
]

function MyCombobox() {
  const [selectedPerson, setSelectedPerson] = useState(people[0])
  const [query, setQuery] = useState('')

  const filteredPeople =
    query === ''
      ? people
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.toLowerCase())
        })

  return (
    <Form method="post">
    <Combobox value={selectedPerson} onChange={setSelectedPerson}>
      <Combobox.Input
        onChange={(event) => setQuery(event.target.value)}
        displayValue={(person) => person.name}
      />
      <Combobox.Options>
        {filteredPeople.map((person) => (
          <Combobox.Option
            key={person.id}
            value={person}
            disabled={person.unavailable}
          >
            {person.name}
          </Combobox.Option>
        ))}
      </Combobox.Options>
    </Combobox>

    ....
    </Form>
  )
}

export async function action({request}) {
  const formData = await request.formData();
  const data= Object.fromEntries(formData);
  console.log(data);   < empty

  return redirect("..");
}

When the form was submitted, I got empty input data, what am I doing wrong? Thanks for the help!

[greg-hoarau]

Hello !

You probably miss the "name" prop on Combobox component. (see: Combobox - Using with HTML forms)

Good luck !

[yongzhang]

ahh yea likely, thanks!