Admin Change Form Page Blank

[oesah]

What version of Unfold are you using? 0.40.0

What version of Django are you using?

4.2.16

What browser are you using?

Firefox 131.0.2 and Chrome 129.0.6668.100

Did you checked changelog/commit history, if the bug is not already fixed?

Yes

Did you searched other issues, if the bug is not already fixed?

For example: Yes or No

Did you checked documentation?

Yes

Are you able to replicate the bug in the demo site?

No

Repository with reproduced bug

It's private project, I cannot share the code.

Describe your issue

change_form pages on some models are just blank (white). The console shows:

alpine.js:5 Uncaught TypeError: Cannot read properties of undefined (reading 'startsWith')
    at alpine.js:5:2789
    at fr.reduce.name (alpine.js:5:2935)
    at Array.reduce (<anonymous>)
    at alpine.js:5:2921
    at Array.map (<anonymous>)
    at de (alpine.js:5:2049)
    at alpine.js:5:5151
    at T (alpine.js:5:3875)
    at T (alpine.js:5:3932)
    at T (alpine.js:5:3932)

On some models there is no issue, it only affects some of my models. Here is one example of a model that works:

class SubjectCategory(models.Model):
    description = models.TextField(blank=True, null=True)
    approved = models.BooleanField(default=False)
    name = models.CharField(max_length=256, unique=True)
    created_by = models.ForeignKey(
        User,
        on_delete=models.SET_NULL,
        related_name="%(app_label)s_%(class)s_created",
        null=True,
        blank=True,
    )
    responsible = models.ForeignKey(
        User,
        on_delete=models.SET_NULL,
        related_name="%(app_label)s_%(class)s_responsible",
        null=True,
        blank=True,
    )

@admin.register(models.SubjectCategory)
class SubjectCategoryAdmin(unfold_admin.ModelAdmin):
    list_display = ("name", )

Here is a model that does not work:

class Vendor(models.Model):
    url = models.URLField(blank=True, null=True)
    attributes = models.ManyToManyField(
        Attribute,
        blank=True,
        related_name="vendors",
    )
    approved = models.BooleanField(default=False)
    name = models.CharField(max_length=256, unique=True)

@admin.register(models.Vendor)
class VendorAdmin(BaseAdminMixin, unfold_admin.ModelAdmin):
    list_display = ("name", )
    search_fields = ("name", "url")

For some reason, on the second model it does not seem to initiate the JS part properly. I can play around with the html and remove the attribute "x-cloak" and then I see the content, but the JS is not working.

I cannot find anything important that's different in these models or admin config.

[oesah]

I was able to narrow down the cause of the error. The attributes fields on the vendor causes the crash. When I disable it in the admin, by settings fields = ("name", "url") (excluding attributes), the page loads again.

My guess now is, that the number of items in the attributes fields, which in my case is much higher than in my other models, causes the JS not to load properly. This also explains why some models with ManyToMany fields work, but not those that have the attributes field.

[lukasvinclav]

The page is blank because there is JavaScript error preventing applying x-cloak (docs below). I suspect something else what is not in your code here, is causing this issue.

https://alpinejs.dev/directives/cloak

I'm not sure if the information which you provided are going to be enough to help you. Would you mind to:

1. create a minimal repository where I can reproduce the issue?

2. send me a link to the demo project where this error is occurring (https://demo.unfoldadmin.com)?

[oesah]

I am trying very hard to reproduce the error, but somehow it's very difficult. Other ManyToMany fields work, I also switched to autocomplete_fields from filter_horizontal and same issue. If the attributes M2M field has a value, the page is blank. If its empty, it loads propertly.

But for other M2M fields, there is no issue even with selected values. Could it be, that somehow the model field name attributes is clashing somewhere?

I will try to investigate more and create a minimal repo once I find it.

And thanks for this project, I think it's really cool :)

[oesah]

Ok so I was able to reproduce with a fresh setup. It's easy:

from django.db import models

class Attribute(models.Model):
    name = models.CharField(max_length=100)

    def __str__(self):
        return self.name

class Item(models.Model):
    name = models.CharField(max_length=100)
    attributes = models.ManyToManyField(Attribute, related_name="items")
    attrs = models.ManyToManyField(Attribute, related_name="items2")

    def __str__(self):
        return self.name

from django.contrib import admin
from unfold.admin import ModelAdmin

from .models import Attribute, Item

@admin.register(Attribute)
class AttributeAdmin(ModelAdmin):
    list_display = ("name",)

@admin.register(Item)
class ItemAdmin(ModelAdmin):
    list_display = ("name",)

    # filter_horizontal = ("attributes",)

    # comment out the next two lines and uncomment the line above to produce the error
    exclude = ("attributes",)
    filter_horizontal = ("attrs",)  # this line is fine

When I exclude attributes, it works fine, even thought attrs is exactly the same M2M:

But when I enable attributes, I get the blank page:

So my guess now is, the attribute name attributes breaks something somewhere :(

---

asgiref==3.8.1 Django==5.1.2 django-unfold==0.40.0 sqlparse==0.5.1

[lukasvinclav]

Hey, so I took a look at the issue but I was not able to replicate it. From the information which you provided, it seems that filter_horizontal could be a source of problem. I checked the demo site where this option is used and it worked:

http://localhost:8000/en/admin/auth/group/add/

I can only recommend you to try to replicate same issue on the demo site. You can create a new PR to Formula project with the issue and I will check it. I'm going to close the issue now but if you have something, ping me here.