tags shown twice inside tags filter fields (on hold)

[valentijnscholten]

Reproducible on https://demo.defectdojo.org

1. Goto
2. Select some tags from the dropdown
3. Observe they are shown correctly (and only once)

4. Click "Apply filters"
5. Observer page refresh, open filter section again, observer tags are now duplicated/shown twice

There's some javascript running to initialize these Selectv4 fields. Looks like it might be running twice as also the entries in the dropdown are duplicated.

Please note this a different issues from what is reported in #12601. But it might actually have the same root cause

[fopinappb]

Same as @valentijnscholten, I've been bugged by the duplicates in product/finding filter screen and this looks like same issue of #13228 but it did not cover it.

Trying to look into that PR, it's re-defining tags form fields as tagulous.form.TagField instead of leaving the default, but unsure how to apply that to the filter fields.

Also, it seems weird that a model tagulous.models.TagField does not become tagulous.form.TagField by default

I'll try to look into it

[fopina]

Slight update: it does become a form.TagField by default and the fix in that PR actually breaks autocomplete (I've updated there).
I'll continue to look for another way to fix the duplicated rendering

[fopinappb]

https://github.com/DefectDojo/django-DefectDojo/blob/master/dojo/templates/dojo/filter_js_snippet.html#L18

this line instantly renders it duplicated. According to tagulous docs, this line should not be needed as tagulous already does it, but if we comment it, it's not rendered either.
Once applied, rendered twice.

Might be some other hook that applies select2 again but I haven't found it yet, sharing in case that rings any bell 😄

[valentijnscholten]

The explicit initalization is needed because we defer it in the select2 setup: https://django-tagulous.readthedocs.io/en/latest/forms.html#select2-version-4

I tried various front-end changes to avoid what seems like a duplicate initialization, but have not found the solution yet.

[fopina]

Found it - or sort of.

https://github.com/radiac/django-tagulous/blob/main/tagulous/static/tagulous/adaptor/select2-4.js#L207-L274

• https://github.com/radiac/django-tagulous/blob/main/tagulous/static/tagulous/adaptor/select2-4.js#L208 adds "available tags" to data.
• https://github.com/radiac/django-tagulous/blob/main/tagulous/static/tagulous/adaptor/select2-4.js#L253 applies select2 to this new select with those args which adds everything in args.data as an option
• https://github.com/radiac/django-tagulous/blob/main/tagulous/static/tagulous/adaptor/select2-4.js#L270 this adds selected tags as options, regardless of whether they existed, creating duplicated options
• when val("my option") is applied, all my option pills show up (always 2)

Funny enough, this is actually the ONLY change between 2.1.0 and 2.1.1 (which dependabot bumped back in June)

Downgrading to django-tagulous 2.1.0 fixes this cleanly

[valentijnscholten]

@fopina Amazing find. Kinda weird that "nobody else" seems to be running into this as there is no issue on the tagulous github.

[fopina]

Maybe people don’t upgrade that often.
Or maybe this is one of those behaviors that browsers handle differently, I’ve only tested with Firefox now that I think of it.

Eg, I have an issue with open search dashboards that only happens with Firefox because of how it handles arrays under some specific JS API that it uses. Maybe other browsers do not add duplicated options to select elements… I’ll quickly check that in a few

[valentijnscholten]

It could also have to do with the way we setup/initialize the fields. Do you think your summary is good enough to raise a bug report in the tagoulous GitHub repo?

[fopina]

I think it does, I'll create one and link to it, does that sound good?

Btw, just tested in chrome and safari and the duplicated tags do show up (in current bugfix), so it's not the case of different browser handling of options 👍