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 && (

src/mongoose/sanitizeFormattedValue.ts

@@ -1,6 +1,7 @@
 import mongoose, { SchemaType } from 'mongoose';
 import { createArrayFromCommaDelineated } from './createArrayFromCommaDelineated';
 import { getSchemaTypeOptions } from './getSchemaTypeOptions';
+import wordBoundariesRegex from '../utilities/wordBoundariesRegex';
 
 export const sanitizeQueryValue = (schemaType: SchemaType, path: string, operator: string, val: any): unknown => {
   let formattedValue = val;
@@ -96,12 +97,8 @@ export const sanitizeQueryValue = (schemaType: SchemaType, path: string, operato
     }
 
     if (operator === 'like' && typeof formattedValue === 'string') {
-      const words = formattedValue.split(' ');
-      const regex = words.reduce((pattern, word, i) => {
-        return `${pattern}(?=.*\\b${word}.*\\b)${i + 1 === words.length ? '.+' : ''}`;
-      }, '');
-
-      formattedValue = { $regex: new RegExp(regex), $options: 'i' };
+      const $regex = wordBoundariesRegex(formattedValue)
+      formattedValue = { $regex };
     }
   }
 

src/utilities/wordBoundariesRegex.ts

@@ -0,0 +1,7 @@
+export default (input: string): RegExp => {
+  const words = input.split(' ');
+  const regex = words.reduce((pattern, word, i) => {
+    return `${pattern}(?=.*\\b${word}.*\\b)${i + 1 === words.length ? '.+' : ''}`;
+  }, '');
+  return new RegExp(regex, 'i');
+};

test/fields-relationship/config.ts

@@ -156,18 +156,22 @@ export default buildConfig({
         name: 'relation-restricted',
       },
     });
-    const { id: relationWithTitleDocId } = await payload.create<RelationWithTitle>({
+    const relationsWithTitle = [];
+    await mapAsync(['relation-title', 'word boundary search'], async (title) => {
+      const { id } = await payload.create<RelationWithTitle>({
         collection: relationWithTitleSlug,
         data: {
-        name: 'relation-title',
+          name: title,
         },
       });
+      relationsWithTitle.push(id);
+    });
     await payload.create<FieldsRelationship>({
       collection: slug,
       data: {
         relationship: relationOneDocId,
         relationshipRestricted: restrictedDocId,
-        relationshipWithTitle: relationWithTitleDocId,
+        relationshipWithTitle: relationsWithTitle[0],
       },
     });
     await mapAsync([...Array(11)], async () => {

test/fields-relationship/e2e.spec.ts

@@ -81,6 +81,14 @@ describe('fields - relationship', () => {
       },
     });
 
+    // Doc with useAsTitle for word boundary test
+    await payload.create<RelationWithTitle>({
+      collection: relationWithTitleSlug,
+      data: {
+        name: 'word boundary search',
+      },
+    });
+
     // Add restricted doc as relation
     docWithExistingRelations = await payload.create<CollectionWithRelationships>({
       collection: slug,
@@ -190,7 +198,25 @@ describe('fields - relationship', () => {
     });
 
     // test.todo('should paginate within the dropdown');
-    // test.todo('should search within the relationship field');
+
+    test('should search within the relationship field', async () => {
+      await page.goto(url.edit(docWithExistingRelations.id));
+      const input = page.locator('#field-relationshipWithTitle input');
+      await input.fill('title');
+      const options = page.locator('#field-relationshipWithTitle .rs__menu .rs__option');
+      await expect(options).toHaveCount(1);
+
+      await input.fill('non-occuring-string');
+      await expect(options).toHaveCount(0);
+    });
+
+    test('should search using word boundaries within the relationship field', async () => {
+      await page.goto(url.edit(docWithExistingRelations.id));
+      const input = page.locator('#field-relationshipWithTitle input');
+      await input.fill('word search');
+      const options = page.locator('#field-relationshipWithTitle .rs__menu .rs__option');
+      await expect(options).toHaveCount(1);
+    });
 
     test('should show useAsTitle on relation', async () => {
       await page.goto(url.edit(docWithExistingRelations.id));
@@ -203,7 +229,7 @@ describe('fields - relationship', () => {
       await field.click({ delay: 100 });
       const options = page.locator('.rs__option');
 
-      await expect(options).toHaveCount(2); // None + 1 Doc
+      await expect(options).toHaveCount(3); // None + 2 Doc
     });
 
     test('should show id on relation in list view', async () => {