From 49e142ef594b74ee37b7213feab49d5c4d11e977 Mon Sep 17 00:00:00 2001
From: Zach Schnackel <info@zslabs.com>
Date: Mon, 9 Sep 2019 16:16:15 -0400
Subject: [PATCH] enhancement(widget-relation): support custom options length
 (#2520)

---
 dev-test/config.yml                           |  8 +++++++-
 .../src/RelationControl.js                    |  3 ++-
 .../src/__tests__/relation.spec.js            | 19 +++++++++++++++++++
 website/content/docs/widgets/relation.md      |  1 +
 4 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/dev-test/config.yml b/dev-test/config.yml
index 3da9ab1f..26f27a07 100644
--- a/dev-test/config.yml
+++ b/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'
diff --git a/packages/netlify-cms-widget-relation/src/RelationControl.js b/packages/netlify-cms-widget-relation/src/RelationControl.js
index b10219db..9685db90 100644
--- a/packages/netlify-cms-widget-relation/src/RelationControl.js
+++ b/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);
diff --git a/packages/netlify-cms-widget-relation/src/__tests__/relation.spec.js b/packages/netlify-cms-widget-relation/src/__tests__/relation.spec.js
index 6c18ba21..94516bcc 100644
--- a/packages/netlify-cms-widget-relation/src/__tests__/relation.spec.js
+++ b/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 });
diff --git a/website/content/docs/widgets/relation.md b/website/content/docs/widgets/relation.md
index 490998e0..9d30edb0 100644
--- a/website/content/docs/widgets/relation.md
+++ b/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"