🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
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 283d512prepareNewTagNode
method should return the modified tagData
which includes the __isValid
property 80b348ddropdown.js
into a new file: suggestions.js
for seperation between the dropdown which is just a container and the actual suggestions and their logic code c29dbadprepareNewTagNode
which is called by addTags
, addMixedTags
& prefixedTextToTag
2c12c02dropdown.highlightFirst
setting set to true
by default e5ffe6dselectOption
dropdown method should not return
on mix-mode when this.DOM.input.parentNode
does not exists 57cb194rollup-plugin-banner
with rollup-plugin-banner2
which does supports sourcemaps. Also fixed the banner comment which seems to have not been correct for a long time ef50d7euserInput:false
setting 96f96eepaste
event listener 90cc5f7onClickAnywhere
event should be of type capture
to guarantee it will fire before any other event so not to mess state.hasFocus
(related to #1282) 7e5409conClickAnywhere
event should be of type capture
to guarantee it will fire before any other event so not to mess state.hasFocus
(related to #1282) b2d7c1a<label>
element can't get focused as the focus it shifted to the hidden original field 859fca4select
-mode can only have one tag, so replaced block margin
(up/down) with padding so the tag will occuy the whole space of the container and have a larger clicking area edd8378dblclick
event from being listened to in select
mode, since there is no need for it.EDITED_TAG_BLUR_DELAY
to 0
for better responsiveness 7c63fecusers list
demo in the main demos page f7b5164this.state.hasFocus
to a better location in the code 2fa118cconsole.log
ab10852addEmptyTag
method, the Tagify field should be focused dc6adf4tagify.DOM.scope
node, it should not inherit its line-height
style fd6503cdropdown.appendTarget
setting can now be a function as well, which should return a DOM node bb40af2addEmptyTag()
with dropdown.enabled: 0
setting should create an empty tag with a dropdown of suggestions c86a231esc
key 1e081c1placeCaretAfterNode
which was left out after past refactoing. devs should have access to this method. acdb87f