IBX-8697: ezkeyword invalid state fix

src/bundle/Resources/public/js/scripts/core/taggify.js

@@ -47,30 +47,60 @@
             });
         }
 
-        addTag(name, value, attrs = {}, tooltipAttrs = {}) {
-            if (!value || this.tags.has(value)) {
+        addTags(tagsData) {
+            const newTagsData = tagsData.reduce((processedTags, tagData) => {
+                const { value } = tagData;
+                const processedTagsValues = new Set(processedTags.map((tag) => tag.value));
+
+                if (!value || this.tags.has(value) || processedTagsValues.has(value)) {
+                    return processedTags;
+                }
+
+                processedTags.push(tagData);
+
+                return processedTags;
+            }, []);
+
+            if (newTagsData.length === 0) {
                 return;
             }
 
             const tagTemplate = this.listNode.dataset.template;
-            const nameHtmlEscaped = escapeHTML(name);
-            const valueHtmlAttributeEscaped = escapeHTMLAttribute(value);
-            const renderedTemplate = tagTemplate.replace('{{ name }}', nameHtmlEscaped).replace('{{ value }}', valueHtmlAttributeEscaped);
-            const div = doc.createElement('div');
 
-            dangerouslyInsertAdjacentHTML(div, 'beforeend', renderedTemplate);
+            newTagsData.forEach(({ name, value, attrs = {}, tooltipAttrs = {} }) => {
+                const nameHtmlEscaped = escapeHTML(name);
+                const valueHtmlAttributeEscaped = escapeHTMLAttribute(value);
+                const renderedTemplate = tagTemplate
+                    .replace('{{ name }}', nameHtmlEscaped)
+                    .replace('{{ value }}', valueHtmlAttributeEscaped);
+                const div = doc.createElement('div');
 
-            const tag = div.querySelector('.ibexa-taggify__list-tag');
-            const tagNameNode = tag.querySelector('.ibexa-taggify__list-tag-name');
+                dangerouslyInsertAdjacentHTML(div, 'beforeend', renderedTemplate);
+
+                const tag = div.querySelector('.ibexa-taggify__list-tag');
+                const tagNameNode = tag.querySelector('.ibexa-taggify__list-tag-name');
+
+                this.addElementAttributes(tag, { ...attrs, dataset: { ...attrs.dataset, value } });
+                this.addElementAttributes(tagNameNode, tooltipAttrs);
+                this.attachEventsToTag(tag, value);
+                this.listNode.insertBefore(tag, this.inputNode);
+                this.tags.add(value);
+            });
 
-            this.addElementAttributes(tag, { ...attrs, dataset: { ...attrs.dataset, value } });
-            this.addElementAttributes(tagNameNode, tooltipAttrs);
-            this.attachEventsToTag(tag, value);
-            this.listNode.insertBefore(tag, this.inputNode);
-            this.tags.add(value);
             this.afterTagsUpdate();
         }
 
+        addTag(name, value, attrs = {}, tooltipAttrs = {}) {
+            this.addTags([
+                {
+                    name,
+                    value,
+                    attrs,
+                    tooltipAttrs,
+                },
+            ]);
+        }
+
         removeTagWithValue(value) {
             const tag = this.listNode.querySelector(`.ibexa-taggify__list-tag[data-value="${value}"]`);
 

src/bundle/Resources/public/js/scripts/fieldType/ezkeyword.js

@@ -73,9 +73,12 @@
         class EzKeywordTaggify extends ibexa.core.Taggify {
             afterTagsUpdate() {
                 const tags = [...this.tags];
+                const tagsInputValue = tags.join();
 
-                keywordInput.value = tags.join();
-                keywordInput.dispatchEvent(new Event('change'));
+                if (keywordInput.value !== tagsInputValue) {
+                    keywordInput.value = tagsInputValue;
+                    keywordInput.dispatchEvent(new Event('change'));
+                }
             }
         }
         const taggify = new EzKeywordTaggify({
@@ -93,9 +96,12 @@
         taggify.init();
 
         if (keywordInput.value.length) {
-            keywordInput.value.split(',').forEach((tag) => {
-                taggify.addTag(tag, tag);
-            });
+            const tagsData = keywordInput.value.split(',').map((tag) => ({
+                name: tag,
+                value: tag,
+            }));
+
+            taggify.addTags(tagsData);
         }
 
         taggifyContainer.addEventListener('tagsCreated', updateKeywords, false);

src/bundle/Resources/views/themes/admin/ui/field_type/edit/ezkeyword.html.twig

@@ -1,6 +1,10 @@
 {%- block ezplatform_fieldtype_ezkeyword_widget -%}
     <div class="ibexa-data-source__taggify">
-        {% include '@ibexadesign/ui/component/taggify/taggify.html.twig' %}
+        {% embed '@ibexadesign/ui/component/taggify/taggify.html.twig' %}
+            {% block main_class %}
+                {{- form.vars.errors|length > 0 ? 'is-invalid' -}}
+            {% endblock %}
+        {% endembed %}
     </div>
     <div class="ibexa-data-source__input-wrapper" hidden>
         {{- block('form_widget') -}}