Incorrect size of first autocomple in Inlines with "collapsed" class (on chromium based browsers?)

[Michał Pokusa]

This error occurs on versions after removing the "collapse.js" and moving to <details> and <summary> tags, mainly Django>=5.1 and in my opinion is purely JS/CSS related and Python independent. This happens using both StackedInline and TabularInline.

Tested on Google Chrome (135.0.7049.96), Edge (135.0.3179.85), Brave (1.77.100), but with inconsistnt results, seems like the problems is mainly on desktop, but also on mobile devices most consistently when using desktop mode with sidebar open (I know how it sounds, but it might be caused by some element width checking).
Sometimes it happens after refresh (1st gif) and sometimes from the start (2nd gif).

I identified the problem is with width: auto; instead of e.g. width: 260px; on <span class="select2 select2-container select2-container--admin-autocomplete"> set by Select2.prototype._resolveWidth.
​https://github.com/django/django/blob/1831f7733d3ef03d1ca7fac3e8d9f4c5e3e3375e/django/contrib/admin/static/admin/js/vendor/select2/select2.full.js#L5496

I have successfully reproduces using Django 5.2 on Windows 11, on multiple browsers, on two separate devices, one with 2560x1440 and one with 1920x1080, in both windowed and fullscreen modes. I even tested hosting project on both Windows and Linux, no changes, but as mentioned above, it seems to be purely frontend related issue.

After updating Firefox I am unable to reproduce, I do not know which version I used before, and at this point I am not sure whether there was a problem before, right now it seems it is only affecting chromium based browsers.

No model instances have to be created, it doesn't matter whether user is editing existing object or adding a new one.

Code:

models.py

from django.db import models


class Restaurant(models.Model):
    name = models.CharField(max_length=100)
    address = models.CharField(max_length=255)

    def __str__(self):
        return self.name


class Order(models.Model):
    restaurant = models.ForeignKey(Restaurant, on_delete=models.CASCADE)
    order_number = models.CharField(max_length=20)
    products = models.ManyToManyField("Product", related_name="orders")

    def __str__(self):
        return f"Order {self.pk} from {self.restaurant.name}"


class Product(models.Model):
    name = models.CharField(max_length=100)
    price = models.DecimalField(max_digits=10, decimal_places=2)

    def __str__(self):
        return f"{self.name} - ${self.price}"

admin.py

from django.contrib import admin

from .models import Restaurant, Order, Product


class OrderInline(admin.StackedInline):
    model = Order
    extra = 3

    fields = ["order_number", "products"]
    autocomplete_fields = ["products"]

    classes = ["collapse"]


@admin.register(Restaurant)
class RestaurantAdmin(admin.ModelAdmin):
    list_display = ("name", "address")
    search_fields = ("name", "address")

    inlines = [OrderInline]


@admin.register(Order)
class OrderAdmin(admin.ModelAdmin):
    list_display = ("restaurant", "order_number")


@admin.register(Product)
class ProductAdmin(admin.ModelAdmin):
    list_display = ("name", "price")

    search_fields = ("name",)

[Natalia Bidart]

Hello Michał Pokusa, thank you for the ticket. I'm trying to reproduce but I'm not getting the UI issue that you are showing. I have defined the models and admin as you specified, but the admin UI is showing the right/expected UI. I have tried having zero and having many Product instances. I have tried small, medium and large screen sizes. I have used Firefox and Django from main and from stable/5.2.x. I have tried the TabularInline and the StackedInline for the OrderInline.

I'll close as needsinfo but please reopen with detailed instructions to reproduce, including:

• Django version (please note that 5.1 is on security support only, so you should try to reproduce on 5.2 or main)
• Browser version
• Screen size
• Expected models instances (do we need one product? two? same price? etc)

[Natalia Bidart]

Michał, thank you for the further details. With your instructions, I was able to reproduce. It takes a few attempts, but I managed to do it using Chrome 135.0.7049.84 (official build), incognito session. I agree the issue seems to be that the "autocomplete span" has width: auto; when the bug is visible, and in other cases, when the UI looks as expected, it shows (for example) width: 227.5px;.

I'll accept the ticket since it's an issue, but unclear how we can reliably fix it. Do you have a suggestion? Perhaps we could try upgrading select2 to its latest version and see if this is fixed?