Help! multi select with final form

[Duckinm]

Can someone help me implement the multi-select with react final form?

Right now I'm using react-select with final form, but it's too complicated.

I can't retrieve the output as it said Expected array but it's number. How can I convert the select or input type element of useField to receive array?

[lbd1607]

Hi Duckinm,

I've tried implementing the useField() hook to accomplish multi-select, but had a lot of trouble getting it to work. Here is how I have implemented multi-select in my Blitz apps instead:

Multi-select

Here's an example of multi-select implementation in Blitz. In this example, I'm creating a list that allows me to select multiple Star Wars characters.

1. Set up the data model

Put the name of your multi-select field in your data model as a scalar list:

model List {
  id         Int      @id @default(autoincrement())
  listName   String   @unique
  characters String[]
}

2. Configure mutations

Add the attribute to your create and edit mutations. Here's what it looks like in the create mutation:

const CreateList = z
  .object({
    listName: z.string(),
    characters: z.array(z.string()), //Be sure to convert the array to a string.
  })
  .nonstrict()

3. Create your data

In this example, I'm creating some simple data to map through. You can also pull in data from your other models or just create multiple <field/> elements in your form, which I'll cover in the next step.

const characters = {
  [uuid()]: {
    id: 1,
    characterName: "Luke Skywalker",
  },
  [uuid()]: {
    id: 2,
    characterName: "Leia Organa",
  },
  [uuid()]: {
    id: 3,
    characterName: "Han Solo",
  },
}

4. Add the <fieldset> to your form

The following are a couple methods I've used to implement multi-select in a Blitz app.

The first method demonstrates how to map through an object and display options dynamically using the data that I created in the previous step. This creates a multi-select list.

The second method demonstrates how to create a <fieldset> that contains multiple <fields/>. This creates a list of items that can be toggled, like checkboxes.

Method 1: Map through an object and populate fields

For the <field/> inside the <fieldset>, the name must match whatever the name is of your data attribute in your model and mutation. From steps 1 and 2, mine is "characters".

To be a multi-select list, the field must also have the multiple attribute.

When mapping through the object, map each entry as an <option>.

<fieldset>
  <Field component="select" name="characters" aria-required="true" multiple>
    {Object.entries(characters).map(([id, character]) => (
      <option
        key={character.id}
        value={character.characterName}
        label={character.characterName}
        defaultValue={character.characterName[0] || []}
      ></option>
    ))}
  </Field>
</fieldset>

Method 2: Use multiple fields

For each <field/> inside the <fieldset>, the name must match whatever the name is of your data attribute in your model and mutation. From steps 1 and 2, mine is "characters".

<fieldset className="checkbox">
  <div>
    <Field name="characters" value="Luke Skywalker" id="luke" component="input" type="checkbox" />
    <label htmlFor="luke"> Luke Skywalker</label>
  </div>
  <div>
    <Field name="characters" value="Leia Organa" id="leia" component="input" type="checkbox" />
    <label htmlFor="leia"> Leia Organa</label>
  </div>

  <div>
    <Field name="characters" value="Han Solo" id="han" component="input" type="checkbox" />
    <label htmlFor="han"> Han Solo</label>
  </div>
</fieldset>