🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
mix-mode, when pressing the ENTER key when typing non-tag text, there should be no tag entering edit-mode and also, entering edit-mode should should be allowed when the a11y.focusableTags setting it set to true and also the currently focusable element is a tag. (fixes #1331, fixes #1329) dbd7d77setReadonly method should only blur if the current active element is that specific Tagify instance. This might not work if an external button was used to trigger this method. 69eb547gulp-nunjucks devDependencies in order to completely refactor the index.html demos pageindex.html containing all the examplesdist folder to the exports property in package.json. Seems like recent addition of the exports property had caused issues for some users when trying to import the CSS file which was not included in the exports and so I've added all the files, just in case fa82144css file in package.json 58eaa24pkg-ok pre-check lib with package-json-validator (pjv) 0833599features section in the README file 02ff494react.tagify.js file in dist folder 1a9d1abindex.html demos file afba253./dist/react.tagify.jsx 80a2af8removeTags method when there are no tags, there should not be an error in the console due to tagElms variable equals to[undefined] and not [] 2637510wrapper HTML template by extracting the input into its own template function c52c6e3select-mode e0c6380tagify.js file-path after recent search & replace mistake a868247tagify.min.js script in index.html examples page to tagify.js c1fc042dropdown.maxItems setting ae8185btagify.min.js scripts in the test HTML files to tagify.js b185d7cpackage.json to alias the deprecated tagify.min.js path to the new file name af08d05tagify.min.js to tagify.js ed900bc@yaireo/tagify/react) 02a59cbexports property in package.json for easier imports for the React port and also to eliminate errors after recent breaking-changes to the react.tagify.jsx file which is not in the dist folder d12daa6getWhitelistItem method did not take into consideration whitelist array consisting of primitives of type number 99af32bvalue:0 should work as expected 463a77afocusable 65187c5dropdown.enabled is changed to 0 automatically if userInput is set to false by the applySettings method caae620cursor: text CSS property should only be applied if Tagify has an editable node within 3d36780this.removeAllCustomListeners as a cleanup stage inside the destroy method d787493react.tagify should be imported from the src folder and not dist 619dba5userInput to false has no effect in select mode f02d911userInput setter/getter to dynamically change the setting after initialization 10fb5a4placeholder after initialization efadc70​ from templates into constants file aa61a38Tagify.logger.enabled 62319cbthis with globalThis in es6-promise.js polyfill file after an error started to happened due to recent gulpfile changes: "The 'this' keyword is equivalent to 'undefined' at the top level of an ES module" 45c9166helpers file 6b64e6etagify.js from './dist as there is now only tagify.min.js. * Deleted jQuery.tagify.min.js as the jQuery port have been deprecated 6267addBabel with SWC
node version from 14.20 to 16.15
v4 to v5
gulpfile
@rollup/stream packagerollup-plugin-terser with @rollup/plugin-terser
peerDependencies in package.json 8e4a93bevent variable in onWindowKeyDown method to isFocused & lostFocus for better clarity and prevent possible mix-ups d2c78cbjQuery port entirely./dist/. Please use the source file from /src/react.tagify.jsx instead.text variable was not specific enough when getting the input's text 00a96baaddMixTags method was using an undeclared variable. 4387cf8import example for React Tags & MixedTags components 57ee338select mode 8cd82a3focus and blur events for the input element to global focusin & focusout events because they can be propagated, and more flexible to work with because it doesn't resrict working only with the input element 669ed81dropdown.show() method should do nothing if this.state.dropdown.visible is true 65abbb9autocomplete method cannot currently work for select mode since it only works for the input element which is hidden in select mode 10078f1select mode to have focus when being "Tabbed" into, by giving the tag's text node a contenteditable which makes it recieves focus aca03a0isWithinNodeTag to test if a certain node is nested inside a tag element d9595c9skipInvalid to true and enforceWhitelist also to true should not skip the adding logic if input is invalid and 5d58fbfTagify.logger.enabled = true; to all test files and main demos page 3bc3361Tagify.logger static method to the constructor (disabled by default) and routed all console.warn statements in the code to it. 8c65593dropdownItemNoMatch content should not have empty spaces as it will show up in the HTML when injected 229d0e1mix mode example 283d512