fix: implement the same word boundary search as the like query (#1038)

Co-authored-by: Dan Ribbens <dan.ribbens@gmail.com>

src/admin/components/elements/ReactSelect/index.tsx

@@ -61,6 +61,7 @@ const ReactSelect: React.FC<Props> = (props) => {
     isClearable,
     isMulti,
     isSortable,
+    filterOption = undefined,
   } = props;
 
   const classes = [
@@ -108,6 +109,7 @@ const ReactSelect: React.FC<Props> = (props) => {
           MultiValueLabel: SortableMultiValueLabel,
           DropdownIndicator: Chevron,
         }}
+        filterOption={filterOption}
       />
     );
   }
@@ -125,6 +127,7 @@ const ReactSelect: React.FC<Props> = (props) => {
       options={options}
       isSearchable={isSearchable}
       isClearable={isClearable}
+      filterOption={filterOption}
     />
   );
 };

src/admin/components/elements/ReactSelect/types.ts

@@ -2,6 +2,11 @@ import { OptionsType, GroupedOptionsType } from 'react-select';
 
 export type Options = OptionsType<Value> | GroupedOptionsType<Value>;
 
+export type OptionType = {
+  [key: string]: any,
+};
+
+
 export type Value = {
   label: string
   value: string | null
@@ -23,4 +28,7 @@ export type Props = {
   placeholder?: string
   isSearchable?: boolean
   isClearable?: boolean
+  filterOption?:
+  | (({ label, value, data }: { label: string, value: string, data: OptionType }, search: string) => boolean)
+  | undefined,
 }

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

@@ -22,6 +22,7 @@ import { createRelationMap } from './createRelationMap';
 import { useDebouncedCallback } from '../../../../hooks/useDebouncedCallback';
 import { useDocumentInfo } from '../../../utilities/DocumentInfo';
 import { getFilterOptionsQuery } from '../getFilterOptionsQuery';
+import wordBoundariesRegex from '../../../../../utilities/wordBoundariesRegex';
 
 import './index.scss';
 
@@ -70,6 +71,7 @@ const Relationship: React.FC<Props> = (props) => {
   const [optionFilters, setOptionFilters] = useState<{[relation: string]: Where}>();
   const [hasLoadedValueOptions, setHasLoadedValueOptions] = useState(false);
   const [search, setSearch] = useState('');
+  const [enableWordBoundarySearch, setEnableWordBoundarySearch] = useState(false);
 
   const memoizedValidate = useCallback((value, validationOptions) => {
     return validate(value, { ...validationOptions, required });
@@ -322,6 +324,17 @@ const Relationship: React.FC<Props> = (props) => {
     }
   }, [initialValue, getResults, optionFilters, filterOptions]);
 
+  // Determine if we should switch to word boundary search
+  useEffect(() => {
+    const relations = Array.isArray(relationTo) ? relationTo : [relationTo];
+    const isIdOnly = relations.reduce((idOnly, relation) => {
+      const collection = collections.find((coll) => coll.slug === relation);
+      const fieldToSearch = collection?.admin?.useAsTitle || 'id';
+      return fieldToSearch === 'id' && idOnly;
+    }, true);
+    setEnableWordBoundarySearch(!isIdOnly);
+  }, [relationTo, collections]);
+
   const classes = [
     'field-type',
     baseClass,
@@ -392,6 +405,10 @@ const Relationship: React.FC<Props> = (props) => {
           options={options}
           isMulti={hasMany}
           isSortable={isSortable}
+          filterOption={enableWordBoundarySearch ? (item, searchFilter) => {
+            const r = wordBoundariesRegex(searchFilter || '');
+            return r.test(item.label);
+          } : undefined}
         />
       )}
       {errorLoading && (