Yaireo Tagify : tags deleted if selected a second time

943 Views Asked by At

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="[{&quot;value&quot;:&quot;F\u00eates&quot;,&quot;readonly&quot;:true,&quot;title&quot;:&quot;read-only category-tag&quot;}]" 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>
0

There are 0 best solutions below