duplicate drop-downs when using django-autocomplete-light

[frnmst]

Hi,

I am using django-autocomplete-light to display foreign key drop-down menus. This is what I get when using django-jazzmin:

The menu on the left is from jango-autocomplete-light.

Standard admin:

Any ideas to hide django-jazzmin's menus when django-autocomplete-light menus are present?

Thank you

[farridav]

I think we fix this by ignoring the select that autocomplete light is using in main.js

On a side note, unless your using autocomplete light for something advanced, or using a very old version of Django, auto complete on foreign key fields is available from Django https://docs.djangoproject.com/en/2.0/ref/contrib/admin/#django.contrib.admin.ModelAdmin.autocomplete_fields

[frnmst]

Thanks, I didn't know about ModelAdmin.autocomplete_fields! I'll give it a go.

[djpretzel]

I had this issue as well & it was a bit confusing. I do think DAL exposes more of the underlying functionality of Select2 and can be useful in scenarios where the default Django autocomplete isn't as configurable, so compatibility would be awesome.

[farridav]

If someone is able to tell me a CSS class that is applied to the select, we can add it here https://github.com/farridav/django-jazzmin/blob/master/jazzmin/static/jazzmin/js/change_form.js#L108

And this will stop us running select2 over it..

[marcoooo]

Is there any work around available for now? I struggle to find the required css to hide the right one :-)

[desarrollosrosarinos]

I'm having the same problem. I cannot use django automcomplete because is very slow when you have many foreign keys and inlines. Is something we can do to make it work till you fix it? Thank you, this theme looks great.

[desarrollosrosarinos]

I fix it commenting this function in change_form.js function applySelect2() { // Apply select2 to any select boxes that don't yet have it // and are not part of the django's empty-form inline //const noSelect2 = '.empty-form select, .select2-hidden-accessible, .selectfilter, .selector-available select, .selector-chosen select'; //$('select').not(noSelect2).select2({ width: 'element' }); } Maybe you cloud disable this function when autocomplete light is installed.

[6sr]

Solution provided by @desarrollosrosarinos worked for me but it also affected the UI of other select tags. Can we do something to handle this. Before commenting After commenting

[6sr]

I think the issue is somewhere in the order of execution of javascript files. So i delayed the execution of applySelect2 using setTimeout. This fixed the issue for me without affecting other select tags.

Replace this with below code https://github.com/farridav/django-jazzmin/blob/e3f9d45183d58f78bf4c6793969490631a84681d/jazzmin/static/jazzmin/js/change_form.js#L136

setTimeout(applySelect2, 100);

[MathiasKowoll]

@6sr indeed it works but if you have an inline it still shows duplicated when using inlines, I applied you solution and instead of using dal on inlines, I used Django owns implementation

[MathiasKowoll]

I was able to fix the issue changing the following without applying previous fixes. It works with inlines too. I added the following class into the JavaScript django-jazzmin/jazzmin/static/jazzmin/js/change_form.js: change from const noSelect2 = '.empty-form select, .select2-hidden-accessible, .selectfilter, .selector-available select, .selector-chosen select'; to const noSelect2 = '.empty-form select, .select2-hidden-accessible, .selectfilter, .selector-available select, .selector-chosen select, .noSelect2DAL ';

then in dal forms add the following: attrs={'class': 'noSelect2DAL'}

Hope this helps and we can keep the functionality

[MathiasKowoll]

@farridav what do you think about the solution above?

[farridav]

Yeah, makes sense to me, if you want to get it in a Pull request, I'll get it reviewed and merged :)

I think it's high time I added some documentation around integration with other apps, in which I can mention how to apply this fix.

[MathiasKowoll]

Yeah, makes sense to me, if you want to get it in a Pull request, I'll get it reviewed and merged :)

I think it's high time I added some documentation around integration with other apps, in which I can mention how to apply this fix.

Will do later today so it can be merged

[MathiasKowoll]

@farridav created the PR, let me know if everything is ok

[hdanh]

using latest django-jazzmin, I still get the duplicated issue, any idea how to fix it

[farridav]

Have you tried the fix from @MathiasKowoll ?

[hdanh]

@farridav ah it works, thanks

[MathiasKowoll]

@hdanh I'm glad it worked

[Simanas]

I have submitted pull request with a beautiful fix which doesn't even require any use of additional attributes on autocomplete widgets. Please merge it in. It works seamlessly!

[MathiasKowoll]

I have submitted pull request with a beautiful fix which doesn't even require any use of additional attributes on autocomplete widgets. Please merge it in. It works seamlessly!

Does It work on inlines too?

[Simanas]

Yes.