Request new options for Select component on scroll

default discord avatar
7 months ago

Hi @jmikrut

Does anyone know how request more options for Select input from payload/components/forms?

I'm trying to put a select input on custom page, and pass as options entries from collection, and I want options to load dynamically as user scrolls down

In relationship field payload loads new options when scrolled to the end of select, but I can't find a prop for request function or callback when end is reached

  • discord user avatar
    Payload Team
    7 months ago

    hey there! ok so first thing you want to make sure of is that you don't use the

    type: 'select'

    field, because with that field, the options are created as an "enum" in GraphQL, db, etc. Meaning you need to know the options when you start the server, and they can't change. Instead, you should use a

    type: 'text'

    field, which will not be an


    and will accept any value at the database level. From there, you could just create a custom React component for your field that renders our internally used


    field UI

    and if you re-use our built-in select field, that is just built on top of


    , which has methods that you can pass to fire callbacks based on when the user scrolls to the bottom of the available options. You can look at our current


    component to see how we wire it up. It's fairly complex, but it can be done!

  • default discord avatar
    6 months ago

    According to types for select component Payload doesn't have loadOptions prop as react-select does, is there a quick way to have react-select look an behave like payload select? I'm trying to keep everything in one style

    type SelectInputProps = Omit<SelectField, 'type' | 'value' | 'options'> & {
        showError?: boolean;
        errorMessage?: string;
        readOnly?: boolean;
        path: string;
        required?: boolean;
        value?: string | string[];
        description?: Description;
        onChange?: (value: Option) => void;
        style?: React.CSSProperties;
        className?: string;
        width?: string;
        hasMany?: boolean;
        isSortable?: boolean;
        options?: OptionObject[];
        isClearable?: boolean;
  • discord user avatar
    Payload Team
    6 months ago

    just render our built-in ReactSelect wrapper

    you will probably have to import this from


    but it should work

    and if it does not have the prop you need exposed, feel free to PR to Payload to make sure that we pass what you need through to the underlying



  • default discord avatar
    6 months ago

    Import from


    works, and it has the prop - onMenuScrollToBottom

    Thank you for your time and help

  • discord user avatar
    Payload Team
    6 months ago

    beautiful! you are very welcome!

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!


Connect with the Payload Community on Discord



Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.