AutocompletePanel does not work if is used inside "through" model of a manytomany

[ddiazpinto]

Example case:

from django.db import models

from modelcluster.models import ClusterableModel
from modelcluster.fields import ParentalKey, ParentalManyToManyField


class Book(ClusterableModel):
    title = models.CharField(max_length=100)
    synopsis = models.TextField()
    # ...
    
    panels = [
        FieldPanel('title'),
        InlinePanel('authors')
    ]


class Author(models.Model):
    name = models.CharField(max_lenght=100)
    # ...

    autocomplete_search_field = 'name'
    
    def autocomplete_label(self):
        return self.name
    
    @classmethod
    def autocomplete_create(cls, name):
        return cls.objects.create(name=name)


class BookAuthor(models.Model):
    ROLES = (
        ('principal', 'Principal'),
        ('collaborator', 'Collaborator'),
        ('reviewer', 'Reviewer'),
    )
    book = ParentalKey(Book, related_name="authors")
    author = models.ForeignKey(Author, on_delete=models.CASCADE)
    role = models.CharField(max_length=15, choices=ROLES)

    panels =  [
        FieldPanel('book'),
        AutocompletePanel('author', page_type=Author),
        FieldPanel('role')
    ]

The problem is that, after pressing "new" button inside book's edition interface, AutocompletePanel does not render anything, but no error appear in js or django console. Simply the field is gone.

I've tried to use ClusterableModel for BookAuthor instead of models.Model and ParentalKey('Author') instead of models.ForeignKey but it still not working, so I think that maybe it is some kind of bug.

[CRSpradlin]

I have kind of a hackey way of solving this issue through JavaScript if you are still struggling with this issue

[myornet]

I have kind of a hackey way of solving this issue through JavaScript if you are still struggling with this issue

Hi @CRSpradlin
Can you share them with us?

[CRSpradlin]

Hi @CRSpradlin
Can you share them with us?

Hey @myornet sorry for the late reply but I was able to fix my many to many autocomplete fields by query selecting all of the attribute values that held the autocomplete id changing them slightly. This code is being ran after the auto-complete fields have been inserted into the DOM (which we have an event trigger for).

var Selected_AutoCompleteFieldId;
//loop through distinct ids, if more than one autocomplete widget exits with the same id, change the id
for(var i=0; i<AutoCompleteFields_IdList.length; i++){
    Selected_AutoCompleteFieldId = document.querySelectorAll('[data-autocomplete-input-id='+AutoCompleteFields_IdList[i]+']');
    for(var j=1; j<Selected_AutoCompleteFieldId.length; j++){
        Selected_AutoCompleteFieldId[j].attributes['data-autocomplete-input-id'].value = Selected_AutoCompleteFieldId[j].attributes['data-autocomplete-input-id'].value + j;
    }
}