I have a bug with the use of Yaireo Tagify: https://yaireo.github.io/tagify/.
I have an input field with a tag initialized in my value attribute and a select field with several options.
If I change the value of my select field, it updates my tag field (the current tag is replaced).
What I don't understand is that it only works if the value has never been added before.
For example my tag field is initialized to "Fêtes", if I add "Foires", "Fêtes" is replaced, if I add "Carnaval", idem it replaces "Foires", but if I select again "Fêtes" in my select field, nothing is displayed in my tag field... And if I select "Marchés", it appears well in my tag field, but if I change it to "Carnaval", nothing is displayed anymore, because already selected before...
Here is my script :
$(document).ready(function() {
$('.js-tags').tagify();
if ($('input.js-tags').length && $('input.js-tags').data('url') === 'event_add') {
$('#event_category').change(function() {
let newCategoryName = $(this).find(':selected').text();
if ($('tag[title="read-only category-tag"]').length) {
let currentCategoryTagName = $('tag[title="read-only category-tag"]').find('.tagify__tag-text').text();
$('input.js-tags').data('tagify').removeTags(currentCategoryTagName);
}
$('input.js-tags').data('tagify').addTags([
{
value: newCategoryName,
readonly: true,
title: 'read-only category-tag'
}
]);
});
}
});
Thanks for your help.
UPDATE : THE RELATED HTML
<select id="event_category" name="event[category]" class="filter-input form-control" aria-describedby="event_category_help">
<optgroup label="Fêtes">
<option value="1">Fêtes</option>
<option value="10">Carnavals</option>
<option value="9">Fêtes foraines</option>
<option value="8">Fêtes locales</option>
<option value="11">Fêtes médiévales</option>
<option value="53">Repas Festifs Réveillons</option>
</optgroup>
<optgroup label="Foires">
<option value="2">Foires</option>
<option value="13">Expositions</option>
<option value="12">Salons</option>
</optgroup>
<optgroup label="Marchés">
<option value="4">Marchés</option>
<option value="22">Marchés bio</option>
<option value="50">Marchés de créateurs</option>
<option value="25">Marchés de Noël</option>
<option value="23">Marchés de potiers</option>
<option value="44">Marchés de Producteurs</option>
<option value="27">Marchés estivaux</option>
<option value="26">Marchés nocturnes</option>
<option value="24">Marchés provencaux</option>
</optgroup>
</select>
<div class="col-md-6">
<div class="form-group">
<label for="event_tags" class="required">Tags *</label>
<tags class="tagify filter-input js-tags form-control" required="" tabindex="-1">
<tag title="read-only category-tag" spellcheck="false" tabindex="-1" class="tagify__tag tagify--noAnim" aria-readonly="true" __isvalid="true" readonly="true" value="Fêtes" contenteditable="false">
<x title="" class="tagify__tag__removeBtn" role="button" aria-label="remove tag"></x>
<div>
<span class="tagify__tag-text">Fêtes</span>
</div>
</tag>
<span data-placeholder="" aria-placeholder="" class="tagify__input" role="textbox" aria-autocomplete="both" aria-multiline="false" contenteditable=""></span>
</tags>
<input type="text" id="event_tags" name="event[tags]" required="required" class="filter-input js-tags form-control" value="[{"value":"F\u00eates","readonly":true,"title":"read-only category-tag"}]" data-url="event_add" aria-describedby="event_tags_help">
<small id="event_tags_help" class="form-text text-muted">Tapez un tag, faites "Entrée" ou "virgule", tapez un autre tag, etc.</small>
</div>
</div>