blockOpts is undefined when adding a StreamField inside InlinePanel

Issue Summary

Trying to use Wagtailmenus (and override menu items as per documentation, but getting a JavaScript error: Uncaught TypeError: Cannot read property ‘initializer’ of undefined in stream.js (line 87)

Steps to Reproduce

1. Start a new project with wagtail start myproject
2. Add the wagtailmenus extension found here.
3. Extend wagtailmenus by adding overrides as per this link , but instead of a CharBlock field add a StreamField (that calls a StructBlock) (example below)
4. Run migrate / makemigrations
5. Visit the admin section and go to Settings > Main menu and click on ADD MENU ITEMS
6. The form should appear with the added StreamField at the bottom - click the icon to create a new StreamField item
7. The JavaScript error will be thrown

More information

I believe this JavaScript code var blockTypeName = $('#' + sequenceMember.prefix + '-type').val(); is looking for a hidden field which does not exist in the DOM.

My Code

class ManualSubMenuFieldBlock(StructBlock):
    manual_link_url = CharBlock(required=True, max_length=255)
    manual_link_text = CharBlock(required=True, max_length=255)
    class Meta:
        icon = 'form'
        template = "home/blocks/manual_sub_menu_field_block.html"
        label='Manual Sub Items'


# new wagtail custom menu system 
class CustomMainMenuItem(AbstractMainMenuItem):
    """A custom menu item model to be used by ``wagtailmenus.MainMenu``"""

    menu = ParentalKey(
        'wagtailmenus.MainMenu',
        on_delete=models.CASCADE,
        related_name="custom_menu_items", #Add a setting to base.py to use your custom model
    )

    manual_subs = StreamField([
        ('manual_sub_menu', ManualSubMenuFieldBlock()),
    ], null=True, blank=True)

    # Also override the panels attribute, so that the new fields appear
    # in the admin interface

    panels = AbstractMainMenuItem.panels + [
        StreamFieldPanel('manual_subs'),
    ]

this setting must be in the base.py (settings) file…

WAGTAILMENUS_MAIN_MENU_ITEMS_RELATED_NAME = "custom_menu_items"

Technical details

• Python version: 3.6.8
• Django version: 2.1.8
• Wagtail version: 2.4.
• Browser version: Chrome 73

[gasman]

Hi @robnardo,

Your SubmenuItemsModel needs a panels definition, to ensure that the streamfield is being rendered using a StreamFieldPanel:

class SubmenuItemsModel(models.Model):
    title = models.CharField(max_length=255)
    submenu_items = StreamField([
        ('submenu_item', blocks.CharBlock()),
    ])

    panels = [
        FieldPanel('title'),
        StreamFieldPanel('submenu_items'),
    ]

[robnardo]

Hi @gasman - Please reopen this issue. I am able to reproduce this error using only Wagtail (not installing other modules). I changed title of this bug since this test involves a StreamField within an InlinePanel.

Steps to reproduce:

1. Start with a new wagtail install. My requirements file is:

Django>=2.1,<2.2
wagtail==2.5
uwsgi

1. Make this the models.py file:

from django.db import models
from modelcluster.fields import ParentalKey
from wagtail.core import blocks
from wagtail.core.models import Page
from wagtail.core.fields import StreamField
from wagtail.images.blocks import ImageChooserBlock
from wagtail.admin.edit_handlers import InlinePanel, StreamFieldPanel

class HomePage(Page):
    pass

class SubmenuItemsModel(models.Model):
    title = models.CharField(max_length=255)
    submenu_items = StreamField([
        ('submenu_item', blocks.CharBlock()),
    ])

class SubmenusModels(SubmenuItemsModel):
    page = ParentalKey('TestPage', on_delete=models.CASCADE, related_name='submenus_models')

class TestPage(Page):
    content_panels = Page.content_panels + [
        InlinePanel('submenus_models', label="menu items"),
    ]

1. Run makemigrations / migrate and reload uwsgi
2. Go to admin the Pages > Home
3. Choose ADD A CHILD PAGE under the Home page and choose the Test Page type
4. Then You should get a new Test Page form with Title and Menu Items fields
5. Click the Submenu Item in the StreamField - that will trigger the JavaScript error