Front-end reordering issue of orderables in Wagtail 4.0 & 4.0.1

[robertbrecevic]

Issue Summary

After upgrading to Wagtail > 4.0 the admin frontend stopped saving the push-up and push-down reordering of orderables referenced through an inline-panel. The UI responds correctly by moving the orderables up and down, but the state is neither saved once the post is published — nor is the changing of the sort order reflected in the live preview.

Steps to Reproduce

1. In order to rule out failing dependencies I started a completely new project with wagtail start myproject and made a test.
2. I edited the models.py in the default home app as follows and added two classes: a model and a orderable.

class CollectionPage(Page):
    content_panels = Page.content_panels + [
        InlinePanel(
            'collection_item', 
            heading="My collection", 
            label='collection item'
        ),
    ]


class CollectionItem(Orderable):
    page = ParentalKey(
        'home.CollectionPage', 
        related_name='collection_item'
    )
    my_image = models.ForeignKey(
        "wagtailimages.Image",
        null=True,
        blank=False,
        on_delete=models.SET_NULL,
        related_name="+",
    )
    panels = [FieldPanel("my_image")]

The result is the following: In the admin panel I am able to create new collection pages and choose collection items that consist of Wagtail images. Once I have established the parentally-relations they are not reorderable. The move up and down in UI and when I publish the post, the changes in order are not saved. Neither are the changes reflected in the live preview panel.

3. I consider this to be a bug, since the orderables have been working exemplary all the way up to the latest updates of Wagtail. If I change the sort order directly in the database, this is indeed reflected in the frontend. The issue appears to be related to the UI-functionality in the page-editor.js (or related bindings. The UI-state is not registered outside its internal interface relationships.

• I have confirmed that this issue can be reproduced as described on a fresh Wagtail project: (yes / no)

Yes!

Technical details

• Python version: Python 3.10.0
• Django version: Django 4.1.1
• Wagtail version: Wagtail 4.0.1
• Browser version: Safari 15 & Chrome 105

Follow up

• InlinePanel - add unit test coverage #9155

[lb-]

Can confirm this issue exists, the order input value is not being updated.

See above - re-ordering does not change the input value & then after saving, then loading the page again, the items go back to the original order.

[lb-]

The issue is the use of https://api.jquery.com/children/ no longer working with the new DOM structure introduced by #8983 / ca7f23d

However, the fix may need to be carefully done as to not break nested inline panels.

      $up.on('click', () => {
        const currentChildOrderElem = currentChild.children(
          'input[name$="-ORDER"]',
        );

What is happening here is it is finding the ORDER input element as a direct child of the panel, but these inputs are now one node down inside the w-panel__content not the w-panel.

Maybe we can move the inputs up? update - this will not work due to the panel component usage.
Maybe we can look for the next children only?

We should really pull this code out to its own file and add unit tests for this code as it is quite fragile.

[enzedonline]

I still have this issue in 4.1.2 ... basic inline model:

class CarouselImages(Orderable):
    """Between 1 and 5 images for the home page carousel."""

    page = ParentalKey("blog.BlogPage", related_name="carousel_images")
    carousel_image = models.ForeignKey(
        "wagtailimages.Image",
        null=True,
        blank=False,
        on_delete=models.SET_NULL,
        related_name="+",
        verbose_name="Image"
    )
    caption = RichTextField(null=True, blank=True)

    panels = [FieldPanel("carousel_image"), FieldPanel("caption")]

    class Meta:
        verbose_name = 'Carousel Image'

    content_panels = Page.content_panels + [
        MultiFieldPanel(
            [InlinePanel("carousel_images", max_num=5, min_num=1)],
            heading="Carousel Images",
        ),

[gasman]

@enzedonline Your class Meta: line needs to be class Meta(Orderable.Meta): - otherwise the presence of that meta class overwrites the ordering.

[enzedonline]

@gasman ha, thanks ... I'm wondering how I haven't come across that before now ... ;)