@yaireo/tagify - npm Package Compare versions

Comparing version 4.26.5 to 4.26.6

dist/tagify.polyfills.min.js

 /*
-Tagify v4.26.5 - tags input component
+Tagify v4.26.6 - tags input component
 By: Yair Even-Or <[e-mail]>
@@ -4,0 +4,0 @@ https://github.com/yairEO/tagify

package.json

 {
   "name": "@yaireo/tagify",
-  "version": "4.26.5",
+  "version": "4.26.6",
   "homepage": "https://github.com/yairEO/tagify",
@@ -5,0 +5,0 @@ "description": "lightweight, efficient Tags input component in Vanilla JS / React / Angular [super customizable, tiny size & top performance]",

src/parts/events.js

@@ -162,3 +162,3 @@ import { decode, extend, getfirstTextNode, isChromeAndroidBrowser, isNodeTag, isWithinNodeTag, injectAtCaret, getSetTagData, fixCaretBetweenTags, placeCaretAfterNode } from './helpers'
             // and not the X button or any other custom element thatmight be there
-            var tagTextNode = e.target?.closest(this.settings.classNames.tagTextSelector)
+            // var tagTextNode = e.target?.closest(this.settings.classNames.tagTextSelector)
 
@@ -191,3 +191,3 @@ if( nodeTag && isFocused && (!targetIsTagNode)) {
                 this.postUpdate()
-                // _s.onChangeAfterBlur && this.triggerChangeEvent()
+                _s.onChangeAfterBlur && this.triggerChangeEvent()
             }
@@ -194,0 +194,0 @@

src/parts/suggestions.js

@@ -84,3 +84,5 @@ import { isObject, escapeHTML, extend, unaccent, logger } from './helpers'
                             case 'ArrowRight' :
-                                if( this.state.actions.ArrowLeft )
+                                // do not continue if the left arrow key was pressed while typing, because assuming the user wants to bypass any of the below logic and edit the content without intervention.
+                                // also do not procceed if a tag should be created when the setting `autoComplete.rightKey` is set to `true`
+                                if( this.state.actions.ArrowLeft || _s.autoComplete.rightKey )
                                     return
@@ -91,3 +93,3 @@ case 'Tab' : {
                                 // in mix-mode, treat arrowRight like Enter key, so a tag will be created
-                                if( !isMixMode && !isSelectMode && selectedElm && shouldAutocompleteOnKey && !this.state.editing ){
+                                if( !isMixMode && !isSelectMode && selectedElm && shouldAutocompleteOnKey && !this.state.editing && selectedElmData ){
                                     e.preventDefault() // prevents blur so the autocomplete suggestion will not become a tag
@@ -201,4 +203,10 @@ var value = this.dropdown.getMappedValue(selectedElmData)
     getSuggestionDataByNode( tagElm ){
-        var value = tagElm && tagElm.getAttribute('value')
-        return this.suggestedListItems.find(item => item.value == value) || null
+        var item, value = tagElm && tagElm.getAttribute('value')
+
+        for(var i = this.suggestedListItems.length; i--; ) {
+            item = this.suggestedListItems[i]
+            if( isObject(item) && item.value == value ) return item
+            // for primitive whitelist items:
+            else if( item == value ) return {value: item}
+        }
     },
@@ -372,3 +380,3 @@
         if( !value || !searchKeys.length ){
-            list = _sd.includeSelectedTags
+            list = _sd.includeSelectedTags || _s.mode == 'select'
                 ? whitelist
@@ -375,0 +383,0 @@ : whitelist.filter(item => !this.isTagDuplicate( isObject(item) ? item.value : item )) // don't include tags which have already been added.

src/react.tagify.jsx

@@ -27,2 +27,14 @@ 'use client';
 
+// used for `className` prop changes
+function compareStrings(str1, str2) {
+    if( typeof str1 != typeof str2) return;
+    const words1 = str1.split(' ');
+    const words2 = str2.split(' ');
+
+    const added = words2.filter(word => !words1.includes(word));
+    const removed = words1.filter(word => !words2.includes(word));
+
+    return { added, removed };
+  }
+
 const TagifyWrapper = ({
@@ -69,2 +81,3 @@ name,
     const tagify = useRef()
+    const lastClassNameRef = useRef()
     const _value = defaultValue || value
@@ -164,4 +177,12 @@
         if (mountedRef.current) {
-            tagify.current.toggleClass(className)
+            // compare last `className` prop with current `className` prop and find
+            // which clases should be added and which should be removed:
+            const { added, removed } = compareStrings(lastClassNameRef.current, className);
+
+            added.filter(String).forEach(cls => tagify.current.toggleClass(cls, true))
+            removed.filter(String).forEach(cls => tagify.current.toggleClass(cls, false))
+
         }
+        // save current `className` prop for next change iteration
+        lastClassNameRef.current = className
     }, [className])
@@ -168,0 +189,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

5597

increased by0.67%

Number of lines in readme file

1159

increased by0.17%

Worsened metrics

Total package byte prevSize

4307130

decreased by-0.42%

No dependency changes