Request new options for Select component on scroll

ysione2 years ago

5

• 

  jmikrut

  2 years 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

  enum

  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

  select

  field UI

  
  
  

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

  react-select

  , 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

  relationship

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

• 

  ysione2 years 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;
  }

• 

  jmikrut

  2 years ago

  just render our built-in ReactSelect wrapper

  
  
  https://github.com/payloadcms/payload/blob/master/src/admin/components/elements/ReactSelect/index.tsx
  
  

  you will probably have to import this from

  payload/dist

  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

  react-select

  library

• 

  ysione2 years ago

  Import from

  payload/dist

  works, and it has the prop - onMenuScrollToBottom

  
  

  Thank you for your time and help

• 

  jmikrut

  2 years ago

  beautiful! you are very welcome!