enhancement(widget-relation): support custom options length (#2520)

dev-test/config.yml

@@ -69,7 +69,13 @@ collections: # A list of collections the CMS should be able to edit
                   max: 10,
                 }
               - { label: 'Default Author', name: author, widget: string }
-              - { label: 'Default Thumbnail', name: thumb, widget: image, class: 'thumb', required: false }
+              - {
+                  label: 'Default Thumbnail',
+                  name: thumb,
+                  widget: image,
+                  class: 'thumb',
+                  required: false,
+                }
 
       - name: 'authors'
         label: 'Authors'

packages/netlify-cms-widget-relation/src/RelationControl.js

@@ -153,6 +153,7 @@ export default class RelationControl extends React.Component {
     const { field, query, forID } = this.props;
     const collection = field.get('collection');
     const searchFields = field.get('searchFields');
+    const optionsLength = field.get('optionsLength') || 20;
     const searchFieldsArray = List.isList(searchFields) ? searchFields.toJS() : [searchFields];
 
     query(forID, collection, searchFieldsArray, term).then(({ payload }) => {
@@ -163,7 +164,7 @@ export default class RelationControl extends React.Component {
       }
 
       if (!term) {
-        options = options.slice(0, 20);
+        options = options.slice(0, optionsLength);
       }
 
       callback(options);

packages/netlify-cms-widget-relation/src/__tests__/relation.spec.js

@@ -16,6 +16,15 @@ const fieldConfig = {
   valueField: 'title',
 };
 
+const customizedOptionsLengthConfig = {
+  name: 'post',
+  collection: 'posts',
+  displayFields: ['title', 'slug'],
+  searchFields: ['title', 'body'],
+  valueField: 'title',
+  optionsLength: 10,
+};
+
 const deeplyNestedFieldConfig = {
   name: 'post',
   collection: 'posts',
@@ -163,6 +172,16 @@ describe('Relation widget', () => {
     });
   });
 
+  it('should list the first 10 option hits on initial load', async () => {
+    const field = fromJS(customizedOptionsLengthConfig);
+    const { getAllByText, input } = setup({ field });
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+    await wait(() => {
+      expect(getAllByText(/^Post # (\d{1,2}) post-number-\1$/)).toHaveLength(10);
+    });
+  });
+
   it('should update option list based on search term', async () => {
     const field = fromJS(fieldConfig);
     const { getAllByText, input } = setup({ field });

website/content/docs/widgets/relation.md

@@ -15,6 +15,7 @@ The relation widget allows you to reference items from another collection. It pr
   - `searchFields`: (**required**) list of one or more names of fields in the referenced collection to search for the typed value. Syntax to reference nested fields is similar to that of *displayFields*.
   - `valueField`: (**required**) name of the field from the referenced collection whose value will be stored for the relation. Syntax to reference nested fields is similar to that of *displayFields* and *searchFields*.
   - `multiple` : accepts a boolean, defaults to `false`
+  - `optionsLength`: accepts integer to override number of options presented to user. Defaults to `20`.
 - **Example** (assuming a separate "authors" collection with "name" and "twitterHandle" fields with subfields "first" and "last" for the "name" field):
     ```yaml
     - label: "Post Author"