Autocomplete field fills all empty required fields references to the same model when added a choice in popup.

[Alexandre da Silva]

Example of how to reproduce:

1. create a model Person.

2. create a model Order with 2 fks pointing to person, for example: supplier and customer

from django.db import models

# Create your models here.
class Person(models.Model):
    name = models.CharField(max_length=255)

    def __str__(self):
        return self.name

class Order(models.Model):
    supplier = models.ForeignKey(Person, related_name='the_supplier', on_delete=models.PROTECT)
    customer = models.ForeignKey(Person, related_name='the_customer', on_delete=models.PROTECT)

3. create an admin page for Order.

4. place the two fields in autocomplete_fields:

from django.contrib import admin
from sales.models import *


class PersonAdmin(admin.ModelAdmin):
    search_fields = ['name']

class OrderAdmin(admin.ModelAdmin):
    autocomplete_fields = ['supplier', 'customer']


admin.site.register(Person, PersonAdmin)
admin.site.register(Order, OrderAdmin)

5. do the migration stuff and run the app.

when create an supplier from + symbol near the supplier, when close the window both fields get updated with the ID
this also occurs when editing.

ps. I´m not an expert but the code that seems to introduce this bug is on commit c72f6f36c13a21f6db3d4f85d2d3cec87bad45e6
probably on data-model-ref tag, since in the page all autocompletes have the same data-model-ref value, in this example will be "person"

function updateRelatedSelectsOptions(currentSelect, win, objId, newRepr, newId) {
        // After create/edit a model from the options next to the current
        // select (+ or :pencil:) update ForeignKey PK of the rest of selects
        // in the page.

        const path = win.location.pathname;
        // Extract the model from the popup url '.../<model>/add/' or
        // '.../<model>/<id>/change/' depending the action (add or change).
        const modelName = path.split('/')[path.split('/').length - (objId ? 4 : 3)];
        const selectsRelated = document.querySelectorAll(`[data-model-ref="${modelName}"] select`);

        selectsRelated.forEach(function(select) {
            if (currentSelect === select) {
                return;
            }

            let option = select.querySelector(`option[value="${objId}"]`);

            if (!option) {
                option = new Option(newRepr, newId);
                select.options.add(option);
                return;
            }

            option.textContent = newRepr;
            option.value = newId;
        });
    }

[David Sanders]

A couple of points here:

(note: I only tested on Chrome, behaviour could differ for other browsers)

• While I could reproduce the described issue for creates, I couldn't do so for edits. In the edit screen only the field for which I clicked "+" was updated.

• This appears to be because both fields are required. If you make the fks null=True, blank=True then this behaviour isn't shown. I'm not sure this is something that's fixable as this is the behaviour shown for native selects. If you create a page with simply:

<select></select>

And then run:

document.querySelector('select').options.add(new Option('test'))

it populates the select with the newly created option - because it's the only option to select.

You could possibly solve this by adding an "empty" option?

[David Sanders]

After a bit of playing around with jQuery select2 I believe this is actually fixable - because select2 allows required selects to be deselectable.

Before the option is added, we can observe the value of the select is null for selects that haven't an option selected yet. After adding the option, if the previously observed value was null then we can "deselect" it again.

[David Sanders]

PR: ​https://github.com/django/django/pull/16079

[Alexandre da Silva]

While I could reproduce the described issue for creates, I couldn't do so for edits. In the edit screen only the field for which I clicked "+" was updated.

To reproduce on edit, the steps are:

1. create a new record for order
2. select an existing supplier on select combobox, then click on edit.
3. save the supplier record, customer select also gets updated

Applied patch and tested locally, so the issue semms to be resolved for both cases, add and edit.

[David Sanders]

Alexandre the PR I've submitted above looks like it fixes the issues you've described. Are you able to try it out and report back if it works?

If it does work for you then this will increase the chance of the ticket & patch being accepted.

[Alexandre da Silva]

Hello David,
I already tested yesterday. It worked

[David Sanders]

Thanks Alexandre, will wait for a member of the triage team… Djangocon is on atm so we may need to be patient :)

[Mariusz Felisiak]

Thanks for the report!

Regression in c72f6f36c13a21f6db3d4f85d2d3cec87bad45e6.

[Mariusz Felisiak <felisiak.mariusz@…>]

In 9976f3d4:

Fixed #34025 -- Fixed selecting ModelAdmin.autocomplete_fields after adding/changing related instances via popups.

Regression in c72f6f36c13a21f6db3d4f85d2d3cec87bad45e6.

Thanks Alexandre da Silva for the report.

[Mariusz Felisiak <felisiak.mariusz@…>]

In 33d9247:

[4.1.x] Fixed #34025 -- Fixed selecting ModelAdmin.autocomplete_fields after adding/changing related instances via popups.

Regression in c72f6f36c13a21f6db3d4f85d2d3cec87bad45e6.

Thanks Alexandre da Silva for the report.

Backport of 9976f3d4b80cfb2e6f4c998438622b78eb1ac53e from main