fix(widget-relation): keep referenced field type when not using template (#3850)

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

@@ -143,9 +143,9 @@ export default class RelationControl extends React.Component {
 
   parseNestedFields = (hit, field) => {
     const templateVars = stringTemplate.extractTemplateVars(field);
-    // wrap non template fields with a template
+    // return non template fields as is
     if (templateVars.length <= 0) {
-      field = `{{fields.${field}}}`;
+      return get(hit.data, field);
     }
     const data = stringTemplate.addFileTemplateFields(hit.path, fromJS(hit.data));
     const value = stringTemplate.compileStringTemplate(field, null, hit.slug, data);

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

@@ -103,6 +103,25 @@ const nestedFileCollectionHits = [
   },
 ];
 
+const numberFieldsHits = [
+  {
+    collection: 'posts',
+    data: {
+      title: 'post # 1',
+      slug: 'post-1',
+      index: 1,
+    },
+  },
+  {
+    collection: 'posts',
+    data: {
+      title: 'post # 2',
+      slug: 'post-2',
+      index: 2,
+    },
+  },
+];
+
 class RelationController extends React.Component {
   state = {
     value: this.props.value,
@@ -121,7 +140,9 @@ class RelationController extends React.Component {
   query = jest.fn((...args) => {
     const queryHits = generateHits(25);
 
-    if (last(args) === 'nested_file') {
+    if (args[1] === 'numbers_collection') {
+      return Promise.resolve({ payload: { response: { hits: numberFieldsHits } } });
+    } else if (last(args) === 'nested_file') {
       return Promise.resolve({ payload: { response: { hits: nestedFileCollectionHits } } });
     } else if (last(args) === 'simple_file') {
       return Promise.resolve({ payload: { response: { hits: simpleFileCollectionHits } } });
@@ -371,6 +392,36 @@ describe('Relation widget', () => {
       expect(getAllByText(/^Post # (\d{1,2})$/)).toHaveLength(20);
     });
   });
+  it('should keep number type of referenced field', async () => {
+    const fieldConfig = {
+      name: 'numbers',
+      collection: 'numbers_collection',
+      valueField: 'index',
+      searchFields: ['index'],
+      displayFields: ['title'],
+    };
+
+    const field = fromJS(fieldConfig);
+    const { getByText, getAllByText, input, onChangeSpy } = setup({ field });
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+    await wait(() => {
+      expect(getAllByText(/^post # \d$/)).toHaveLength(2);
+    });
+
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    fireEvent.click(getByText('post # 1'));
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    fireEvent.click(getByText('post # 2'));
+
+    expect(onChangeSpy).toHaveBeenCalledTimes(2);
+    expect(onChangeSpy).toHaveBeenCalledWith(1, {
+      numbers: { numbers_collection: { '1': { index: 1, slug: 'post-1', title: 'post # 1' } } },
+    });
+    expect(onChangeSpy).toHaveBeenCalledWith(2, {
+      numbers: { numbers_collection: { '2': { index: 2, slug: 'post-2', title: 'post # 2' } } },
+    });
+  });
 
   describe('with multiple', () => {
     it('should call onChange with correct selectedItem value and metadata', async () => {