Layout Widget Error: "You were unable to take control of the document"

Question

Hello Apostrophe CMS Wizards

I was reading the tutorial found here: https://apostrophecms.org/docs/tutorials/getting-started/layout-widgets.html

It says:

An alternative to contextualOnly, skipInitialModal lets you skip the widget manager modal when the widget is created (like contextualOnly) but preserves the Edit UI for later use. This is useful for widgets that have secondary configuration, like setting a background color.

This is EXACTLY the kind of functionality that I want to expose for my users. I have already built a much more complex version of the code found in the gist above, but the simpler version still has the same error that I am experiencing so I am including the code for that here.

Essentially, I want to have an editing dialog for my custom layout widget that allows them to change the background color, decide whether or not to add a background image, decide how that background image is displayed, all without having to touch code.

The Problem

After saving the changes to my custom widget, you are unable to make changes to what is inside my widget's areas. Instead, it spits out an error telling you that You were unable to take control of the document.

You can get the wanted functionality back if you refresh the page, but obviously that is not ideal.

What am I missing here?

Example Code

You'll notice that the code below is only slightly modified example code for the tutorial page above.

Here is the simple widget's widget.html file:

<div class="two-column">
    <div class="column-left">
        {{ apos.area(data.widget, 'areaLeft', {
            widgets: {
                'apostrophe-images': {}
            }
        }) }}
    </div>
    <div class="column-right">
        {{ apos.area(data.widget, 'areaRight', {
            widgets: {
                'apostrophe-images': {}
            }
        }) }}
    </div>
</div>

and here is the simple widget's index.js file:

module.exports = {
    extend: 'apostrophe-widgets',
    label: 'Double Content',
    skipInitialModal: true,
    addFields: [
      {
        name: 'areaLeft',
        type: 'area',
        label: 'Left Area',
        contextual: true
      },
      {
        name: 'areaRight',
        type: 'area',
        label: 'Right Area',
        contextual: true
      }
    ]
  };

UPDATE 1

As suggested, I cloned this repo and modified the One Column widget to match the setup mentioned above. For completeness, I've included my changes to the code here. I've made no other changes to the repo's code.

module.exports = {
  extend: 'apostrophe-widgets',
  label: 'One Column',
  // contextualOnly: true, // removed
  skipInitialModal:true, // added
  addFields: [
    {
      name: 'one',
      type: 'area',
      contextual:true, // added
    }
  ]
};

RESULT

Still have the same problem.

If it helps, the version of ApostropheCMS used in the repo above is: 2.58.0

Look at this

I'm new here, so actually embedding images here is not allowed, but this should still work. Have a look:

screen capture gif of failure

UPDATE 2

With the new update, everything appears to have been fixed!

Answer 1

The original issue reported has been fixed in this commit https://github.com/apostrophecms/apostrophe/pull/1430 .. it is currently in master and will be published to npm within a week or so.