Impossible to delete pending new inline in admin when invalid (delete button missing)

[Owen Heisler]

When adding a new inline record in the Django Admin, it is impossible to delete the record if it has had a validation error. This is the most evident to the user if he/she accidentally attempts to use the wrong inline for some data. For example, if a ContactAdmin has both PhoneInline and EmailInline, the user may accidentally enter a phone number in an EmailInline record. When attempting to submit the changes, a validation error is raised. Seeing the problem, the user would now like to just delete the new record that is pending. However, at this point there is no Delete button. Thus the user is forced to either (a) reload the change page, discarding any other unrelated pending changes on the page; or (b) change the data to make it valid, click Save and continue editing, and then delete the offending record before finally saving the changes again.

Test code

Consider the following code, where the Django Admin provides access to a Groups page with a Persons inline.

models.py:

from django.db import models

class Group(models.Model):
    name = models.CharField(max_length=30)

class Person(models.Model):
    group = models.ForeignKey(Group, on_delete=models.CASCADE)
    first_name = models.CharField(max_length=30)
    last_name = models.CharField(max_length=30)

admin.py:

from django.contrib import admin
from .models import *

class PersonInline(admin.StackedInline):
    model = Person
    extra = 0

@admin.register(Group)
class GroupAdmin(admin.ModelAdmin):
    inlines = [PersonInline]

Steps to reproduce

1. Go to the Group add page (for example, <​http://localhost:8000/admin/myapp/group/add/>). Enter a Group name, add a Person with first_name and last_name, and click Save and continue editing.
2. Change the Group name. Add a second Person for the group, but enter a first_name only. A delete button (X icon) is available to discard the pending record:
3. Click SAVE. There will be a validation error, as expected, because last_name is not provided. However, the Delete button is missing:
4. The user is now forced to either (a) fix the validation error or (b) reload the page, discarding all unrelated changes on the page. It is not possible for the user to fix the validation error by simply canceling/deleting the pending new record.

---

It is actually worse than that…

Another cause of validation errors can be uniqueness constraints. These errors can be difficult to fix and sometimes actually cannot be fixed. So it is totally possible that because of a validation error the user is forced to reload the page, there is no other choice.

Building on the models above, here is an example of a validation error that can be unsalvageable for users without the create permission for groups. New Council model is added, a foreign key from Person to Council is created and also a constraint with unique_together = ('council', 'group') is set.

[frnhr]

​PR

[Carlton Gibson]

Fix should address the CSS TabularInline too. (This has the same issue.) Also, the PR includes a significant refactoring, which should be in a separate commit.
But other than that, looks goods. (Works 🙂)

[frnhr]

PR edited

[Carlton Gibson]

PR is ready to go.

[Carlton Gibson <carlton@…>]

In 6ea3aad:

Refs #29087 -- Refactored admin inlines.js.

Split logic into separate functions to clarify and allow reuse.

[Carlton Gibson <carlton@…>]

In 24e540f:

Fixed #29087 -- Added delete buttons for unsaved admin inlines on validation error.

[Carlton Gibson <carlton@…>]

In f4272d00:

Fixed #32348, Refs #29087 -- Corrected tutorial for updated deleting inlines UI.

Updated tutorial to match change in 24e540fbd71bd2b0843e751bde61ad0052a811b3
allowing deletion of original extra inlines.

[Carlton Gibson <carlton.gibson@…>]

In 4dbbe37:

[3.2.x] Fixed #32348, Refs #29087 -- Corrected tutorial for updated deleting inlines UI.

Updated tutorial to match change in 24e540fbd71bd2b0843e751bde61ad0052a811b3
allowing deletion of original extra inlines.

Backport of f4272d000af598018247fe9687dac0fd02a29a7c from master

[Carlton Gibson <carlton.gibson@…>]

In fa203f17:

[3.1.x] Fixed #32348, Refs #29087 -- Corrected tutorial for updated deleting inlines UI.

Updated tutorial to match change in 24e540fbd71bd2b0843e751bde61ad0052a811b3
allowing deletion of original extra inlines.

Backport of f4272d000af598018247fe9687dac0fd02a29a7c from master

[Backit]

This bug still exists in Django 2.22

[Carlton Gibson]

Please don't reopen closed tickets.

This fix was made as part of Django 3.1 (see 24e540fbd71bd2b0843e751bde61ad0052a811b3)
You'll need to update to that or beyond.

[Backit]

Replying to Carlton Gibson:

Please don't reopen closed tickets.

This fix was made as part of Django 3.1 (see 24e540fbd71bd2b0843e751bde61ad0052a811b3)
You'll need to update to that or beyond.

But 2.2 is still supported, so should receive bugfixes, isn'it?

[Mariusz Felisiak]

Replying to Backit:

But 2.2 is still supported, so should receive bugfixes, isn'it?

Django 2.2. is in extended support so it receives only security patches.