Merge pull request #1079 from payloadcms/fix/#1062

fix: #1062

src/admin/components/forms/field-types/Relationship/index.tsx

@@ -1,5 +1,5 @@
 import React, {
-  useCallback, useEffect, useState, useReducer,
+  useCallback, useEffect, useState, useReducer, useRef,
 } from 'react';
 import equal from 'deep-equal';
 import qs from 'qs';
@@ -68,10 +68,11 @@ const Relationship: React.FC<Props> = (props) => {
   const [lastFullyLoadedRelation, setLastFullyLoadedRelation] = useState(-1);
   const [lastLoadedPage, setLastLoadedPage] = useState(1);
   const [errorLoading, setErrorLoading] = useState('');
-  const [optionFilters, setOptionFilters] = useState<{[relation: string]: Where}>();
+  const [optionFilters, setOptionFilters] = useState<{ [relation: string]: Where }>();
   const [hasLoadedValueOptions, setHasLoadedValueOptions] = useState(false);
   const [search, setSearch] = useState('');
   const [enableWordBoundarySearch, setEnableWordBoundarySearch] = useState(false);
+  const firstRun = useRef(true);
 
   const memoizedValidate = useCallback((value, validationOptions) => {
     return validate(value, { ...validationOptions, required });
@@ -335,6 +336,19 @@ const Relationship: React.FC<Props> = (props) => {
     setEnableWordBoundarySearch(!isIdOnly);
   }, [relationTo, collections]);
 
+
+  // When relationTo changes, reset relationship options
+  // Note - effect should not run on first run
+  useEffect(() => {
+    if (firstRun.current) {
+      firstRun.current = false;
+      return;
+    }
+
+    dispatchOptions({ type: 'CLEAR' });
+    setHasLoadedValueOptions(false);
+  }, [relationTo]);
+
   const classes = [
     'field-type',
     baseClass,

src/admin/components/forms/field-types/Relationship/optionsReducer.ts

@@ -25,7 +25,7 @@ const sortOptions = (options: Option[]): Option[] => options.sort((a: Option, b:
 const optionsReducer = (state: Option[], action: Action): Option[] => {
   switch (action.type) {
     case 'CLEAR': {
-      return action.required ? [] : [{ value: 'null', label: 'None' }];
+      return [];
     }
 
     case 'ADD': {
@@ -51,7 +51,7 @@ const optionsReducer = (state: Option[], action: Action): Option[] => {
             }
             return docs;
           },
-          []),
+            []),
         ];
 
         ids.forEach((id) => {

src/admin/components/forms/field-types/Relationship/types.ts

@@ -15,7 +15,6 @@ export type Option = {
 
 type CLEAR = {
   type: 'CLEAR'
-  required: boolean
 }
 
 type ADD = {