Integrate custom select (react-select or other) as custom Redwood component

[Sebastian]

I am trying to integrate a custom select component (tried with Downshift/React-Select/Mantine with Redwood to use as custom multiselect component instead of native select.

I have a problem with sending the data from the form and it’s a very similar question to one posted here:

Using Controller component from react-hook-form

Hi there, I’m wondering what is the correct way to get a controller component working with redwood forms. I feel like I have everything setup right but I can not get the controller to register and I’m not seeing any data. Here is my code import { useForm, Controller } from 'react-hook-form' import Select from 'react-select/creatable' export const QUERY = gql` query FindPlants { plants { id title } } ` export const Loading = () => <div>Loading...</div> export const E…

Sadly it does not fix all my issues but at least NOT using separate controller helped. Code below is adapted (naming - Garden) to keep same context as code posted in the link above.

The issues I have are:

1. When I try to submit data the ‘plants’ from here are sent as array of objects instead of array of ID’s (as I think it should be sent)
2. If I change the onChange method to return ID’s the react-select breaks with undefined values (as title and id fields do not exist
3. In either case the GraphQL schema for my update mutation is not expecting that type to be present on the update input and throws an error.

So here’s a question:

A. what can I do to make GraphQL aware that when I update main object (say Garden) I want to assign multiple Plants to it? Since the schema is generated I should pick up changes I made to EditGardenCell or am I missing something?

B. Assuming I will need to send only IDs to the GraphQL endpoint (like with connect) how can I do this without breaking react-select?

input UpdateGardenInput {
  description: String
  title: String
}

import Select from 'react-select';

import { Controller } from '@redwoodjs/forms';

// use this as data for the Select field
// const options = [
//   { id: 'chocolate', title: 'Chocolate' },
//   { id: 'strawberry', title: 'Strawberry' },
//   { id: 'vanilla', title: 'Vanilla' },
// ];

const SelectMultipleChoice = ({
  name = 'plants',
  options = [],
  defaultValues,
  control,
}) => {
  return (
    <Controller
      name={name}
      render={({ field }) => {
        return (
          <Select
            {...field}
            options={options}
            defaultValue={defaultValues}
            getOptionValue={(option) => option?.id}
            getOptionLabel={(option) => option?.title}
            isMulti
            onChange={(val) => {
              field.onChange(val);
            }}
            // this will return the IDs to GraphQL (but it will break react-select) with name of form input - here `plants`
            // onChange={(val) => {
            //   return field.onChange(
            //     val.map((element) => {
            //       return element.id;
            //     })
            //   );
            // }}
          />
        );
      }}
    />
  );
};

export default SelectMultipleChoice;

BTW. it all works fine if I use SelectField with multiple option but it’s unusable when selecting elements from larger sets.

[dthyresson]

Hi @Sebastian is there a public repo or some working app we could clone to try to reproduce?

That would help debug or diagnose since these components aren’t in Redwood by default so knowing how to set things up would be helpful. Thanks.

[Sebastian]

Hi @dthyresson and thank you for help offer.

Here is the repo I created to show the issue: https://github.com/morecode-spzoo/redwood-playground

I created some sample data and it seems to me now that I have problem with GraphQL definitions or schema. ReadMe file has all the instructions and there are comments in the code.

Hint
look for FIXME: comments.