Dynamic options for Select Field

[webcredo]

Wondering if is possible to make options for select field to be dynamic and not only predefined?
For example I want show options for this fields from another source by API request.

[DanRibbens]

Hello @webcredo!

Wondering if is possible to make options for select field to be dynamic and not only predefined?

Currently, no. The setup for graphql and database schema, and validation are all strict around the predefined values.

For example I want show options for this fields from another source by  API request.

As a future enhancement I would like to see the select field to have dynamic options or some other way to handle your use-case.

Your best bet today is to use a text field and set the admin.components.Field to a custom component that does what you need.
For building that component You can use the same react-select library in your component as Payload so it works and looks the same.
You can read about custom field components in the docs: https://payloadcms.com/docs/admin/components#fields

You can copy much of what you need for it to work from the Payload Relationships field since it uses react-select and calls an api to get options.

If you get stuck we can help you more on this and if you make something worth sharing I'd love to see you share it here for others to use.

[DanRibbens]

I should point out, the Relationship field is a complicated one to copy as it allows searching and paginated API calls for options. You might be better off looking at the Select as a starting point if you can get all the options in one API request.

[webcredo]

Thanks @DanRibbens for quick reply, I going to implement your advice.

[akanshSirohi]

import React, { useCallback, useEffect, useState } from "react";
import {
  useField,
  SelectInput,
} from "payload/components/forms";

const Select = (props) => {
  const { path, name, label, options } = props;

  const [opts, setOpts] = useState([]);

  const { showError, value, setValue } = useField({
    path,
  });

  useEffect(() => {
    setOpts(options);

    // Mimic network request...
    setTimeout(() => {
      setOpts([
        {
          label: "Some Label",
          value: "__value__",
        },
      ]);
      console.log("Set Options Called!");
    }, 3000);
  }, []);

  const onChange = useCallback(
    (incomingOption) => {
      const { value: incomingValue } = incomingOption;
      setValue(incomingValue);
    },
    [setValue]
  );

  return (
    <SelectInput
      name={name}
      label={label}
      options={opts}
      value={value}
      onChange={onChange}
      showError={showError}
    />
  );
};

export default Select;

@DanRibbens
This is the code I have written to populate the select field using some API request, it's working perfectly fine but the useEffect function is being called twice, is there any way to achieve the same with any other method. And is this some kind of bug in the payload or react..??

[DanRibbens]

Yes, it is a bug. The extra render happens on the edit form. :(

We will resolve this in the 1.0 changes to the admin UI.

Iirc it was introduced when we fixed a bug on changing locales.

[dsod]

Is this something you would want help implementing?
By the looks of it, react-select have a "creatable" component, which achieves this requirement nicely.
Based on your comment above, validation and the graphql schema would need refactoring. I see a few different configuration/schema approaches:

• New field type (probably not)
• New configuration option on the Select field type
• Define a dynamic "Select" field, if the "options" option is undefined (make the option optional). Wont be able to use both pre-defined options and dynamic options then.

It doesn't look like the creatable react component accept additional props of interest, except for perhaps formatCreateLabel for localization/customization and isValidNewOption in case you want validation for options that the user wants to add.

[RapidOwl]

Today, I took a copy of the existing Select field and modified the useEffect to load data via an API call.

The limitation that I've now hit is that passing custom properties into this custom field doesn't seem to be possible because of restrictions on types. When I specify my collection, I've set my field up as 'text' and overridden admin.components.field with my ApiSelect. I would very much like to pass in a function that returns Promise<{ label: string; value: string }[]>, but when specifying my collection I'm limited to the properties available on the base field type (text) rather than my custom field.

I've worked around this by wrapping my ApiSelect field inside a data-specific component e.g.

import React from 'react';
import ApiSelect from "./ApiSelect";
import GetCategories from '../data/GetCategories';

const CategoryApiSelect: typeof ApiSelect = (props) => {
	return <ApiSelect {...props} loader={GetCategories} />;
}

export default CategoryApiSelect;

Then I execute the loader function inside the useEffect in ApiSelect.

This is the best way I've found to minimise boilerplate code when needing to create a variety of select fields that draw data from various different API endpoints.

[jmikrut]

Yesssss - can you share what you've built?

I would very much like to pass in a function that returns Promise<{ label: string; value: string }[]>, but when specifying my collection I'm limited to the properties available on the base field type (text) rather than my custom field.

There is a new way of passing in custom attributes to fields (the custom property). This might help you!

It was recently merged. Anyway, I'd love to have an example of this right in the Payload repo's /examples folder.

[RapidOwl]

@jmikrut Here you go! RapidOwl/payload-api-select-example#1

I created a brand new Payload project and created a PR so you can easily see the differences. I've added some notes in the PR description.

When I get chance, I'll take a look at the custom property and see if I can simplify what I've done.

[RapidOwl]

@jmikrut Okay that was a lot easier than expected. Here's another simplified PR where I'm passing the data access function in via the custom property on the collection: RapidOwl/payload-api-select-example#2

[akanshSirohi]

Sorry for late reply as I was busy with my day job. Yes, I figured out the way at that time to make select field dynamic. I created a custom component for that, I am pasting the code below, but I don't know if it is completely correct to use as I last worked on that project 10 months ago. It worked for me at that time.

import React, { useCallback, useEffect, useState } from "react";
import { useField, SelectInput } from "payload/components/forms";

const Select = (props) => {
  const { path, name, label, options, required, access } = props;

  const [opts, setOpts] = useState([]);

  const { showError, value, setValue } = useField({
    path,
  });

  useEffect(() => {
    setOpts(options);

    fetch(`https://your_api`)
      .then((response) => response.json())
      .then((data) => {
        let mOptions = [];
        data.forEach((option) => {
          mOptions.push({
            label: option,
            value: option,
          });
        });
        setOpts(mOptions);
      });
  }, []);

  const onChange = useCallback(
    (incomingOption) => {
      const { value: incomingValue } = incomingOption;
      console.log("Incoming Value:", incomingValue);
      setValue(incomingValue);
    },
    [setValue]
  );

  return (
    <SelectInput
      name={name}
      label={label}
      options={opts}
      value={value}
      access={access}
      required={required}
      onChange={onChange}
      showError={showError}
    />
  );
};

export default Select;

[RapidOwl]

Thanks for this! I did something very similar.

[dominikzogg]

I think it should not "only" be about dynamic loading the options, but using AsyncSelect from react-select for typeahead functionality. Something we two callable's can be given, one to resolve the option based on value (initial load) and one for the concrete typeahead resolving related options.

The problem with this idea is thats its incompatible with for example the whole custom react select code within payload.

[JarrodMFlesch]

@JessChowdhury created a video on this exact topic, check it out here: https://www.youtube.com/watch?v=Efn9OxSjA6Y

[RapidOwl]

This is great! Much tidier than my effort.

[neslob]

link to repo. https://github.com/JessChowdhury/custom-select

Thanks @JessChowdhury