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

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 });