JavaScript issue with autocomplete_fields and Semantic UI #271
Description
Related to issue #100, but slightly different - the latest version may have fixed the bug when Bootstrap is used, but there's a Javascript issue that arises when Semantic is used. I suspect this is due to a namespacing issue with the Select2 widget. When autocomplete_fields are defined on a ModelAdmin, the select2 Javascript gets included in the <head>. This is the order:
<script src="/static/admin/js/vendor/select2/select2.full.js"></script>
<script src="/static/plugins/js/semantic.min.js"></script>
... [other stuff]
<script src="/static/martor/js/martor.semantic.min.js"></script> [at the very bottom]
The error I get in console looks like this:
Uncaught TypeError: o.find(...).dropdown is not a function
at HTMLDivElement.<anonymous> (martor.semantic.min.js:9:12540)
at Function.each (jquery.js:383:19)
at jQuery.fn.init.each (jquery.js:205:17)
at fn.martor (martor.semantic.min.js:9:344)
at HTMLDocument.<anonymous> (martor.semantic.min.js:9:14373)
at mightThrow (jquery.js:3489:29)
at process (jquery.js:3557:12)
Which is triggered by the use of $().dropdown() and $().tab() in martor.semantic.js:
// Handle tabs.
mainMartor.find('.ui.martor-toolbar .ui.dropdown').dropdown();
mainMartor.find('.ui.tab-martor-menu .item').tab();And here's a screenshot of how it looks:
Steps to reproduce
To reproduce in the demo app, in settings.py change MARTOR_THEME = 'bootstrap' to MARTOR_THEME = 'semantic' and then navigate to /admin/app/post/add/. Django version 5.1.4, Martor version 1.6.45, and Chrome 131.0.6778.139.
Possible solutions: to change MARTOR_THEME back to bootstrap (which might work for the demo app, but doesn't really work if I already have Semantic for my project) or to turn off autocomplete. I also tried merely removing the corresponding 2 offending lines from martor.semantic.min.js but it breaks the functionality of the Editor/Preview tabs.
I've also tried installing django-semantic-admin, which seems to automatically turn manytomany fields into Semantic UI dropdown widgets (bypassing select2) without the need to list autocomplete_fields. So far it seems to work, but it would be nice to be able to use Martor and autocomplete_fields together without having to install a different app.
(Thanks for all your work on this @agusmakmun! It's such a useful app.)