yairEO / tagify

🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
https://yaireo.github.io/tagify/
Other
3.48k stars 429 forks source link

Duplicates not allowed in 'mix' mode even though duplicates is true #1358

Closed dinukapj closed 2 weeks ago

dinukapj commented 2 months ago

Prerequisites

Explanation

I want to create a mix input with multiple duplicates as needed by the user. However the suggestions avoid showing the same tag again if it already exists in the input. I've enabled duplicates as stated in the library.

What I see:

image

Since First name already exists, the suggestions never show it until I delete it.

<script>
    var whitelist = [
        { text: "account.first_name", value: "Account: First Name" },
        { text: "account.last_name", value: "Account: Last Name" },
        { text: "deal.deal_name", value: "Deal: Name" },
    ];

    var inputElem = document.getElementById('smsBody');
    var tagify = new Tagify(inputElem, {
        mode: 'mix',
        pattern: /@|#/,
        enforceWhitelist: true,
        whitelist: whitelist,
        duplicates: true, //enforced this to allow duplicates
    });

    console.log(tagify.settings.duplicates); //this prints 'true' which means library accepted it

    tagify.on('add', function (e) {
        var tagElm = e.detail.tag;
        var tagType = e.detail.data.text.startsWith('account.') ? 'account' : 'deal';
        tagElm.classList.add('tagify__tag--' + tagType);
    });

    inputElem.addEventListener('change', onChange);
    function onChange(e) {
        document.getElementById("outputValue").innerText = e.target.value;
    }
</script>
yairEO commented 2 weeks ago

They are allowed, they only not being suggested.

You must set the dropdown.includeSelectedTags setting to true manually.

the duplicates setting is only for the tags themselves, unrelated to the suggestions list which has its own setting, because there are scenarios where decoupling those two is needed.