Browse Source

Fix new topic tags no longer working without JS

A user with JS disabled can submit new topics, but the autocomplete
behavior was making it so that their tags were lost, because the "real"
tags input was a hidden one that was only updated by JS.

This starts the original (visible) input out as the tags one, and has
the JS move it over to the hidden one, so it will only happen if they
have JS enabled.
merge-requests/68/head
Deimos 6 years ago
parent
commit
1b04330551
  1. 7
      tildes/static/js/behaviors/autocomplete-input.js
  2. 4
      tildes/tildes/templates/macros/forms.jinja2

7
tildes/static/js/behaviors/autocomplete-input.js

@ -37,6 +37,13 @@ $.onmount('[data-js-autocomplete-input]', function() {
$.onmount(); $.onmount();
} }
// initialization (won't repeat on re-mounts because it removes the name attr)
if ($(this).attr("name")) {
// move the "tags" name to the hidden input (so the form works without JS)
$(this).removeAttr("name");
$("[data-js-autocomplete-hidden-input]").attr("name", "tags");
}
if ($(this).val() !== '') { if ($(this).val() !== '') {
addChip($(this)); addChip($(this));
} }

4
tildes/tildes/templates/macros/forms.jinja2

@ -32,7 +32,7 @@
autocomplete="off" autocomplete="off"
autocapitalize="none" autocapitalize="none"
spellcheck="false" spellcheck="false"
name="query"
name="tags"
placeholder='Tags (like "music, soundtrack, full album")' placeholder='Tags (like "music, soundtrack, full album")'
data-js-autocomplete-input='{{ autocomplete_options|tojson if autocomplete_options }}' data-js-autocomplete-input='{{ autocomplete_options|tojson if autocomplete_options }}'
{% if value %} value="{{ value }}"{% endif %} {% if value %} value="{{ value }}"{% endif %}
@ -40,7 +40,7 @@
> >
</div> </div>
<div class="autocomplete" data-js-autocomplete-suggestions></div> <div class="autocomplete" data-js-autocomplete-suggestions></div>
<input name="tags" type="hidden" value="" data-js-autocomplete-hidden-input>
<input name="tags-hidden" type="hidden" value="" data-js-autocomplete-hidden-input>
</div> </div>
{% endmacro %} {% endmacro %}

Loading…
Cancel
Save