Editing an invalid tag validates all the erroneous other ones

[KolRah]

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

Explanation

I have implemented this great library but I have an issue I validate any new tag (or edited) using a function to validate if this is an email or not and update the tag using var newtag = tagify.replaceTag(tag, {...data, __isValid: "Entered value is not an email"});

When I add, let's say a valid email + 2 erroneous ones I get the first in grey (valid) and the 2 others ones in red (invalid) If I update the 2nd one (in error) to a valid email value, the tag is updated correctly but all other erroneous ones become valid.

Sample code for the beforeUpdate

const onBeforeUpdateTag = (e) => {
            let tagify=e.detail.tagify;
            let tag=e.detail.tag;
            let data=e.detail.data;

            tagify.tagLoading(tag, true)
            let isValid = isEmail(data.value);
            tagify.tagLoading(tag, false)
            if( !isValid )
            {
                console.warn('-->invalid');
                var newtag = tagify.replaceTag(tag, {...data, __isValid: "Entered value is not an email"});
            }
        }

[yairEO]

Hi, please create a minimal test case as per the requirements of opening an issue such as this.

There is a link to a jsbin template when you create a new issue.

[KolRah]

Hi thanks for your reply I wasn't aware of how to use jsbin, now it's ok

test case: https://jsbin.com/fejaweveyi/edit?html,js,console,output

add a good tag ( test@gmail.com ) then add 2 erroneous ones like "something" and "somethingelse" edit "something" to "something@gmail.com" and somethingelse becomes valid

[yairEO]

1. you've included Tagify twice in the demo page
2. you've mis-used tagify in the way you are validating tags and therefore you created the bug you reported for.
3. your demo is way too complex. you should have removed 80% of the code to keep it minimal and reproducible.

You should be using the validate settings, as seen in a simplified version of your demo page:

https://jsbin.com/farasel/edit?html,js,output

function isEmail(value) {
  const emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/gm
  return emailRegex.test(value)
}

var element = document.querySelector('textarea');

let tagify = new Tagify(element,{
  keepInvalidTags: true,
  duplicates: false,
  pasteAsTags: true,
  validate({value}) {
    return isEmail(value)
  }
})

[KolRah]

ok I understand your point I didn't get the Validate function behaviour correctly so I had to do all this stuff Thanks for your kind help