Bug: Editor fields not updating when linking between pages inside CMS

[mcintyre321]

I am using Netlify-CMS to build a readonly site, so I am using custom components which don't allow editing instead of the default ones.

One of those controls is a link to another-page-in-the-app control, which I'm using where one might ordinarily have a relation widget.

Describe the bug

When I follow the link to the linked page, any fields which have the same name as on the previous page are not updated.

To Reproduce

• Visit https://cuzkv.csb.app/#/collections/products/entries/Sentry
• Click the "Some Team" text in the owner section, (which is an anchor tag, linking to https://cuzkv.csb.app/#/collections/teams/entries/Some%20Team )

Expected behaviour page is the same as if you have pasted the https://cuzkv.csb.app/#/collections/teams/entries/Some%20Team url into browser

Actual behaviour The 'Name' field still says "Sentry"

Expected behavior The 'Name' field says "Some Team"

Applicable Versions:

• Netlify CMS version: [e.g. 2.0.4]
• Git provider: repo-test
• OS: Ubunut 20.04
• Browser version chrome 83.0.4103.116 (Official Build) (64-bit)

https://codesandbox.io/s/cuzkv?file=/config.yml

Additional context

This is my custom widget. I wonder if I should be using a react router Link instead of an a but I don't know how to do that...

CMS.registerWidget(
        "relation-readonly",
        createClass({
          render: function () {
            return this.props.value
              ? h(
                  "a",
                  {
                    id: this.props.forID,
                    className: this.props.classNameWrapper,
                    href:
                      "#/collections/" +
                      this.props.field._root.entries[0][1] +
                      "/entries/" +
                      this.props.value
                  },
                  this.props.value
                )
              : h("span");
          }
        })
      );

[erezrokah]

Hi @mcintyre321, I think the issue might be that we're loading the entry on component mount: https://github.com/netlify/netlify-cms/blob/d649e960f0fa1d5b7ff5c0c306b8901e3ead87f2/packages/netlify-cms-core/src/components/Editor/Editor.js#L102 which might not happen when you link directly in the editor. You could try using a react router Link component by setting up the widget as a separate package exporting a react component: https://github.com/netlify/netlify-cms-widget-starter

Another option would be to add target="_blank" to open the entry in a new tab.

[mcintyre321]

Hi, and thanks for your quick response.

I think this is technically a bug, the more I think about it. If I

1. visit https://cuzkv.csb.app/#/collections/products/entries/Sentry
2. paste the other url (https://cuzkv.csb.app/#/collections/teams/entries/Some%20Team) in to the address bar

I still get incorrectly displayed data, the Name field still says "Sentry" (so I don't think it's caused by my a tag).

[erezrokah]

2. paste the other url (https://cuzkv.csb.app/#/collections/teams/entries/Some%20Team) in to the address bar

You'd need to do a refresh to make sure the component is remounted.

In order to fix it we would need to extract some of the code for loading the entry and registering the navigation blocker (https://github.com/netlify/netlify-cms/blob/d649e960f0fa1d5b7ff5c0c306b8901e3ead87f2/packages/netlify-cms-core/src/components/Editor/Editor.js#L123)

And run the relevant parts when the slug/collection changes.