When using templates most settings do not work.

[Maremic]

Prerequisites

• [x] I am running the latest version
• [x] I checked the documentation and found no answer
• [x] I checked to make sure that this issue has not already been filed

💥 Demo Page

I have same problem in demo page for flags example on https://yaireo.github.io/tagify/#section-extra-properties => https://codepen.io/vsync/pen/ExKjVJJ

Explanation

• What is the expected behavior? I need templates + autocomplete to work together, when I have templates off everything work as expected, when I apply templates, templates looks as expected, but autocomplete do not work, I can move with arrows in dropdown, but when selected nothing apear.

In console I have no errors, using latest chrome on main page of tagify it works as expected https://yaireo.github.io/tagify/#section-extra-properties we can see flags, templates and autocomplete, how ever in demo page for that example is exactly same issue as I am getting in my project https://codepen.io/vsync/pen/ExKjVJJ

• What is happening instead? Tagify looks like ignoring most of settings

• What error message are you getting? No error messages

I tried more versions of my code, define settings on tagify intance directly, editing it after etc.. I tried more templates from examples to see if I am not just stupid.

document.addEventListener("DOMContentLoaded", function () {
    window.app.checkSaveButton();
    var conditionTagify = new Tagify(document.querySelector('#maid_condition'), {
        delimiters: null,
        autoComplete: {
            enabled: true,
        },
        templates: { //if  I delete templates, and leave defaults here, everything works perfectly
            dropdownItem: function(data) {
                return `<div class='${this.settings.classNames.dropdownItem}' tabindex="0" role="option">
                    <img class="tagify__dropdown__item__image" width='30px' height='30px' src=${data.image}>
                     <p class=" w-50">${data.value}</p> <p class="font-small w-50">${data.note}</p>
                </div>`
            }
        }
    });

    // Initialize Tagify for the binding input
    var bindingTagify = new Tagify(document.querySelector('#maid_binding'), {
        delimiters: null,
        autoComplete: {
            enabled: true,
        },
        templates: {
            dropdownItem: function(data) {
                return `<div class='${this.settings.classNames.dropdownItem}' tabindex="0" role="option">
                    <img class="tagify__dropdown__item__image" width='30px' height='30px' src=${data.image}>
                     <p class=" w-50">${data.value}</p> <p class="font-small w-50">${data.note}</p>
                </div>`
            }
        }
    });

    function loadAutocompleteSuggestions(tagifyInstance, type) {
        // Initialize Tagify settings
        tagifyInstance.settings.autoComplete.enabled = true;
        tagifyInstance.settings.autoComplete.tabKey = true;
        tagifyInstance.settings.id = type;
        tagifyInstance.settings.dropdown.maxItems = 10;
        tagifyInstance.settings.dropdown.searchKeys = ['value', 'note'];
        tagifyInstance.settings.dropdown.classname = type;
        tagifyInstance.settings.dropdown.closeOnSelect = true;
        tagifyInstance.settings.dropdown.highlightFirst = true;
        tagifyInstance.settings.dropdown.enabled = 1;

        // Handle input event
        tagifyInstance.on('input', function (e) {
            var value = e.detail.value;
            var selectedIds = tagifyInstance.value.map(tag => tag.id);

            $.ajax({
                url: '/new-pricing/autocomplete',
                dataType: 'json',
                data: {
                    query: value,
                    type: type,
                    selectedIds: selectedIds
                },
                success: function (data) {
                    var suggestions = data.map(function (item) {
                        return {
                            value: item.title,
                            id: item.id,
                            image: item.image || '',
                            state: item.state || '',
                            note: item.note || '',
                            products: item.products || '',
                            style: "--tag-bg:" + (item.state || '#b4b9be') + ";",
                        };
                    });

                    tagifyInstance.settings.whitelist = suggestions;
                    tagifyInstance.dropdown.show(value);
                    console.log("Suggestions:", suggestions); // Debug log
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.error("Error fetching autocomplete suggestions:", textStatus, errorThrown);
                }
            });
        });

        // Handle add event
        tagifyInstance.on('add', function () {
            // tagifyInstance.DOM.input.innerHTML = '';
            // tagifyInstance.DOM.originalInput.value = '';
            tagifyInstance.dropdown.hide();
        });

        // Handle focus event
        tagifyInstance.on('focus', function () {
            if (!tagifyInstance.value.length) {
                tagifyInstance.trigger('input', { detail: { value: '' } });
            }
        });

        // Handle blur event
        tagifyInstance.on('blur', function () {
            tagifyInstance.dropdown.hide();
        });

        // Handle dropdown select event
        tagifyInstance.on('dropdown:select', function (e) {
            const item = e.detail.elm;
            tagifyInstance.addTags([{
                value: item.getAttribute('data-value'),
                id: item.getAttribute('data-id'),
                image: item.getAttribute('data-image'),
                state: item.getAttribute('data-state'),
                note: item.getAttribute('data-note'),
                products: item.getAttribute('data-products')
            }]);
            tagifyInstance.dropdown.hide();
        });

    loadAutocompleteSuggestions(conditionTagify, 'condition');
    loadAutocompleteSuggestions(bindingTagify, 'binding');

    });

[yairEO]

Thanks for reporting. The flag svg image URL (in the CodePen demo page) was an old deprecated URL.

I've updated the Pen for the new URL: https://flagicons.lipis.dev/flags/4x3/...

[Maremic]

Thanks, now at demo page svg images are visible, but it still do not have autocomplete and when you select smething it do not appear as tag until you write exactly same text and then hit double enter.

=> on https://yaireo.github.io/tagify/#section-extra-properties

=> on demo page

there are no images on dropdown, and autocomplete do not run, when you hit enter it do not create selected tag till its exactly the same, I met exactly same issue in my project

[Maremic]

https://codepen.io/Hellsink/pen/yLddRro same in this demo, when you try to include autoComplete:{enabled:true,} it do not work