yourlabs / django-autocomplete-light

A fresh approach to autocomplete implementations, specially for Django. Status: v4 alpha, v3 stable, v2 & v1 deprecated.
https://django-autocomplete-light.readthedocs.io
MIT License
1.79k stars 467 forks source link

Fixes an issue when dal is loaded twice #1270

Closed FiooCode closed 2 years ago

FiooCode commented 2 years ago

When dal is initialized multiple times, yl.functions stays set to {} and the select2 function is no longer present. This causes any future dal fields not to render and instead appear as normal HTML select fields.

This error came up when I tried using HTMX in conjunction with dal. HTMX reloads the form on the fly using ajax calls. When it pulled the new form in and tried to render it, the script tags for dal were loaded again. Thus producing this error.

jpic commented 2 years ago

Can I ask why did you choose HTMX over unpoly.js ? Just curious, I've tried both and ended with unpoly because it had more features, such as updating two separate fragments from a request...

Anyway, nice catch! Did you know we've been patching this stuff over and over again since 2012 :joy:

Hopefully DAL will be proposing a web component based alternative soon

FiooCode commented 2 years ago

I've never tried unpoly before. I'll definitely to check it out. Thanks!

This is a great project by the way. Good work by you are everyone else who contributed. I love using this tool! Thanks for all your efforts @jpic 😄

jpic commented 2 years ago

Thank you for the kind words! Always appreciated ;)

Did you see that new documentation entry ? I hope this saves you from writing a lot of code :P

andrei-v1 commented 2 years ago

Hi, seams for me the same error when I use DAL with HTMX with def clean validation, I got duplicated DAL select field (check GIF screen capture that shows it) When I use DAL with HTML with validation also, everything works fine, no duplicated fields

P.S. i use HTMX as convenient way to use dynamic inline formsets

dal_dup_error

FiooCode commented 2 years ago

@akalikin1 I haven't encountered this exact issue myself. But I have run into a similar issue where it was duplicating the select field.

Fair warning, it's a bit of a hacky solution. I ended up with this bit of code when instantiating my form: form(auto_id=f"fieldname{random.randint(0, 999999)}")

if using a class-based view: def get_form_kwargs(self): kwargs = super().get_form_kwargs() kwargs["auto_id"] = f"fieldname{random.randint(0, 9999999999)}" return kwargs

The problem is that for some reason when the same ID is used on a field and you try to instantiate the field twice, autocomplete sort of freaks out. I'm not sure if this is the same issue your running into, but hopefully it will point you in the direction of a solution.

If you want to test it, just make sure the ID for the html field when it's rendered is different each time. After that, the field shouldn't duplicate.

Also, please let me know if you end up finding something better. 😄 Happy coding!

andrei-v1 commented 2 years ago

@FiooCode thanks for the answer

My exact problem is that when I use HTMX and render the field the class="select2-hidden-accessible" is not added to select field, But in HTML everything is ok this class added to select field and the duplicated field is hidden

@jpic could you look at this problem please?

update 2021-12-05 If i set class manually in widget attrs, it solves the problem attrs = {'class': 'select2-hidden-accessible'}