@yaireo/tagify - npm Package Compare versions

Comparing version 4.24.0 to 4.25.0

dist/tagify.polyfills.min.js

 /*
-Tagify v4.24.0 - tags input component
+Tagify v4.25.0 - 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.24.0",
+  "version": "4.25.0",
   "homepage": "https://github.com/yairEO/tagify",
@@ -34,2 +34,14 @@ "description": "lightweight, efficient Tags input component in Vanilla JS / React / Angular [super customizable, tiny size & top performance]",
   "main": "./dist/tagify.min.js",
+  "exports": {
+    ".": {
+      "import": "./dist/tagify.esm.js",
+      "require": "./dist/tagify.js"
+    },
+    "./react": "./src/react.tagify",
+    "./react.tagify": "./src/react.tagify",
+    "./dist/react.tagify": "./src/react.tagify",
+    "./dist/react.tagify.jsx": "./src/react.tagify.jsx",
+    "./dist/tagify.min.js": "./dist/tagify.js",
+    "./dist/tagify.min": "./dist/tagify.js"
+  },
   "repository": {
@@ -46,2 +58,7 @@ "type": "git",
   ],
+  "peerDependencies": {
+    "prop-types": ">15.5.7",
+    "react": "*",
+    "react-dom": "*"
+  },
   "devDependencies": {
@@ -48,0 +65,0 @@ "@rollup/plugin-terser": "^0.4.4",

src/parts/events.js

@@ -191,4 +191,10 @@ import { decode, extend, getfirstTextNode, isChromeAndroidBrowser, isNodeTag, isWithinNodeTag, injectAtCaret, getSetTagData, fixCaretBetweenTags, placeCaretAfterNode } from './helpers'
 
-            this.state.hasFocus = isFocused ? +new Date() : false
-            this.toggleFocusClass(this.state.hasFocus)
+            // should only loose focus at this point if the event was not generated from within a tag, within the component
+            if( isFocused || nodeTag ) {
+                this.state.hasFocus = +new Date()
+                this.toggleFocusClass(this.state.hasFocus)
+            }
+            else {
+                this.state.hasFocus = false;
+            }
 
@@ -215,6 +221,8 @@ if( _s.mode == 'mix' ){
 
+                var dropdownCanBeShown = _s.dropdown.enabled === 0 && !this.state.dropdown.visible;
+
                 this.toggleFocusClass(true);
                 this.trigger("focus", eventData)
                 //  e.target.classList.remove('placeholder');
-                if( (_s.dropdown.enabled === 0) && !this.state.dropdown.visible ){  // && _s.mode != "select"
+                if( dropdownCanBeShown && (!targetIsTagNode || _s.mode === 'select') ){  // && _s.mode != "select"
                     this.dropdown.show(this.value.length ? '' : undefined)
@@ -226,3 +234,3 @@ }
 
-            else if( lostFocus && !targetIsTagNode){
+            else if( lostFocus ){
                 this.trigger("blur", eventData)
@@ -250,4 +258,7 @@ this.loading(false)
 
-            this.DOM.input.removeAttribute('style')
-            this.dropdown.hide()
+            // when clicking a tag, do not consider this is a "blur" event
+            if ( !nodeTag )  {
+                this.DOM.input.removeAttribute('style')
+                this.dropdown.hide()
+            }
         },
@@ -264,16 +275,19 @@
         onWindowKeyDown(e){
-            var focusedElm = document.activeElement,
-                isTag = isNodeTag.call(this, focusedElm),
-                isBelong = isTag && this.DOM.scope.contains(document.activeElement),
+            var _s = this.settings,
+                focusedElm = document.activeElement,
+                withinTag = isWithinNodeTag.call(this, focusedElm),
+                isBelong = withinTag && this.DOM.scope.contains(document.activeElement),
                 isReadyOnlyTag = isBelong && focusedElm.hasAttribute('readonly'),
                 nextTag;
 
-            if( !isBelong || isReadyOnlyTag ) return;
+            if( !this.state.hasFocus && (!isBelong || isReadyOnlyTag) ) return;
 
-            nextTag = focusedElm.nextElementSibling
+            nextTag = focusedElm.nextElementSibling;
 
+            var targetIsRemoveBtn = e.target.classList.contains(_s.classNames.tagX);
+
             switch( e.key ){
                 // remove tag if has focus
                 case 'Backspace': {
-                    if( !this.settings.readonly ) {
+                    if( !_s.readonly && !this.state.editing ) {
                         this.removeTags(focusedElm);
@@ -286,7 +300,18 @@ (nextTag ? nextTag : this.DOM.input).focus()
 
-                // edit tag if has focus
                 case 'Enter': {
+                    if( targetIsRemoveBtn ) {
+                        this.removeTags( e.target.parentNode )
+                        return
+                    }
+
                     setTimeout(this.editTag.bind(this), 0, focusedElm);
                     break;
                 }
+
+                case 'ArrowDown' : {
+                    // if( _s.mode == 'select' ) // issue #333
+                    if( !this.state.dropdown.visible )
+                        this.dropdown.show()
+                    break;
+                }
             }
@@ -293,0 +318,0 @@ },

src/parts/suggestions.js

@@ -308,8 +308,12 @@ import { isObject, escapeHTML, extend, unaccent, logger } from './helpers'
 
-        // hide selected suggestion
+        // execute these tasks once a suggestion has been selected
         elm.addEventListener('transitionend', () => {
             this.dropdown.fillHeaderFooter()
-            setTimeout(() => elm.remove(), 100)
+            setTimeout(() => {
+                elm.remove()
+                this.dropdown.refilter()
+            }, 100)
         }, {once: true})
 
+        // hide selected suggestion
         elm.classList.add(this.settings.classNames.dropdownItemHidden)
@@ -316,0 +320,0 @@ },

src/parts/templates.js

@@ -16,7 +16,3 @@ import {ZERO_WIDTH_UNICODE_CHAR} from './constants'
                     tabIndex="-1">
-            <span ${!_s.readonly && _s.userInput ? 'contenteditable' : ''} tabIndex="0" data-placeholder="${_s.placeholder || ZERO_WIDTH_UNICODE_CHAR}" aria-placeholder="${_s.placeholder || ''}"
-                class="${_s.classNames.input}"
-                role="textbox"
-                aria-autocomplete="both"
-                aria-multiline="${_s.mode=='mix'?true:false}"></span>
+                    ${this.settings.templates.input.call(this)}
                 ${ZERO_WIDTH_UNICODE_CHAR}
@@ -26,2 +22,13 @@ </tags>`
 
+    input() {
+        var _s = this.settings,
+            placeholder = _s.placeholder || ZERO_WIDTH_UNICODE_CHAR;
+
+        return `<span ${!_s.readonly && _s.userInput ? 'contenteditable' : ''} tabIndex="0" data-placeholder="${placeholder}" aria-placeholder="${_s.placeholder || ''}"
+                    class="${_s.classNames.input}"
+                    role="textbox"
+                    aria-autocomplete="both"
+                    aria-multiline="${_s.mode=='mix'?true:false}"></span>`
+    },
+
     tag(tagData, {settings: _s}){
@@ -28,0 +35,0 @@ return `<tag title="${(tagData.title || tagData.value)}"

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

Total package byte prevSize

4303899

increased by48.45%

Number of package files

40

increased by5.26%

Lines of code

5532

increased by7.17%

Number of lines in readme file

1155

increased by0.35%

Worsened metrics

Dependency count

3

increased byInfinity%

No dependency changes