Tagify duplicates

Wappler General Bugs
1

Wappler Version : 7.8.0
Operating System : kubuntu 24.04
Server Model: nodejs
Database Type: postgresql
Hosting Type: local

Expected behavior

tagify config: tagify allows 3 entries out of a given list of dynamic postcodes from backend. the duplicates checkbox is NOT checked. the text field property is “digits” the value field property is “primaryKey”. one item should only be possible to be one time in the selected tagify.

primaryKey example: “8010;AUT”

digits example: “8010”

8010 should only be allowed one time in the list.

Actual behavior

8010 can be added 2 times to the list (but not 3 times). the value of the first item is “8010;AUT”. the value of the second item is “8010”. i guess because tagify already removed the value of the second item of the list, because of duplicate. but somehow two problems 1) not removed from display and 2) the text field is transferred to backend.

it does work if text field and value field are BOTH set to either digit OR primaryKey → then it is instantly removed with short red coloring from the control.

How to reproduce

it should be reproducable easily. if not and you need a video i will add one, please tell me.

3

we use tagify not from cdn but ship it local in the following version:

  • dmxTagify Wrapper: Version 2.0.8 (Build 2026-03-18)

  • Tagify Library: Version 4.36.0

4

as an update: we tried tagify from CDN and 4.37 now. both are not working either

5

it seems to be a tagify bug (not wappler)

look at the screenshot. the one with 8010, 8010 is not an item and has not dmx:true.

the one with value 8010 should never be possible.

grafik
grafik782×476 46.3 KB

6

Is there a reason why you aren't using the Wappler Tagify? I use it a lot and it's solid.

7

Which options do you use, did you set No Custom to prevent custom tags?

8

hi @brad, thx for the response. we feel more save to have no external references in the workspace. we also load fonts, bootstrap, fontawesome from local. then we can go with a “cookie consent popup” instead of a yes/no popup too. when setting up the project i did a small recherge and found some wappler bugs with offline cdn links. so basically this two reasons. the downside is, that we have to manage the versions ourself.

but the cdn version (4.17.7) is not working either. we made a test-layout page and a test content page with a test-tagify element…

hi @patrick , thx for the response.

we created it this way:

label class="form-label required" for="inp_postcode">Arbeitsort PLZ (Umkreis 25km)</label><input type="text" class="form-control" id="inp_postcode" name="postcodes" aria-describedby="inp_postcode_help" placeholder="Postleitzahlen eingeben" required="true" data-msg-required="Pflichtfeld" is="dmx-tagify" dmx-bind:data="getPostcodesQuery.data.query" tag-text="digits" nocustom="true" min-chars="1" highlight-first="true" max-tags="3" tag-value="pk" duplicates="false"

the “nocustom” flag works, we can’t enter not contained values.

meanwhile we did a small hack, we hope to remove soon.

// Duplicates Fix 
function initTagifyDuplicateCheck() {
    document.querySelectorAll('[is="dmx-tagify"]').forEach(el => {
        const tagify = el.__tagify || el.previousElementSibling?.__tagify;

        if (!tagify) return;
        if (tagify._duplicateCheckInitialized) return;
        tagify._duplicateCheckInitialized = true;
        tagify.settings.validate = function (tagData) {
            const noDmx = tagify.value.some(existing =>
                tagData.__dmx !== true);
                 return !noDmx;
             };
    });
}

function initAllTagify() {
    const uninitialized = Array.from(document.querySelectorAll('[is="dmx-tagify"]')).filter(el => {
        const tagify = el.__tagify || el.previousElementSibling?.__tagify;
        return !tagify?._duplicateCheckInitialized;
    });

    if (uninitialized.length > 0) {
        initTagifyDuplicateCheck();
        setTimeout(initAllTagify, 500);
    }
}

document.addEventListener('DOMContentLoaded', initAllTagify);