Skip to content

Commit

Permalink
#1276 - added a new setting autoComplete.tabKey
Browse files Browse the repository at this point in the history
  • Loading branch information
@yairEO
yairEO committed Jan 8, 2024
1 parent aa79dc0 commit 325df3e
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 17 deletions.
11 changes: 6 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1042,15 +1042,16 @@ enforceWhitelist | <sub>Boolean</sub> | false
userInput | <sub>Boolean</sub> | true | Disable manually typing/pasting/editing tags (tags may only be added from the whitelist). Can also use the `disabled` attribute on the original input element.
autoComplete.enabled | <sub>Boolean</sub> | true | Tries to suggest the input's value while typing (match from whitelist) by adding the rest of term as grayed-out text
autoComplete.rightKey | <sub>Boolean</sub> | false | If `true`, when `→` is pressed, use the suggested value to create a tag, else just auto-completes the input. In mixed-mode this is ignored and treated as "true"
whitelist | <sub>Array</sub> | [] | An array of allowed tags (*Strings* or *Objects*). When using *Objects* in the *whitelist* array a `value` property is a must & should be unique. <br/>Also, the *whitelist used for auto-completion when `autoCompletion.enabled` is `true`
blacklist | <sub>Array</sub> | [] | An array of tags which aren't allowed
autoComplete.tabKey | <sub>Boolean</sub> | false | If `true`, pressing `tab` key would only auto-complete (if a suggesiton is highlighted) but will not convert to a tag (like `rightKey` does) also, unless clicked again (considering the `addTagOn` setting).
whitelist | <sub>Array</sub> | `[]` | An array of allowed tags (*Strings* or *Objects*). When using *Objects* in the *whitelist* array a `value` property is a must & should be unique. <br/>Also, the *whitelist used for auto-completion when `autoCompletion.enabled` is `true`
blacklist | <sub>Array</sub> | `[]` | An array of tags which aren't allowed
addTagOnBlur | <sub>Boolean</sub> | true | Automatically adds the text which was inputed as a tag when blur event happens
addTagOn | <sub>Array</sub> | ['blur', 'tab', 'enter'] | If the tagify field (in a normal mode) has any non-tag input in it, convert it to a tag on any of these "events": blur away from the field, click "tab"/"enter" key
addTagOn | <sub>Array</sub> | `['blur', 'tab', 'enter']` | If the tagify field (in a normal mode) has any non-tag input in it, convert it to a tag on any of these "events": blur away from the field, click "tab"/"enter" key
onChangeAfterBlur | <sub>Boolean</sub> | true | By default, the native way of inputs' `onChange` events is kept, and it only fires when the field is blured.
pasteAsTags | <sub>Boolean</sub> | true | Automatically converts pasted text into tags
callbacks | <sub>Object</sub> | {} | Exposed callbacks object to be triggered on events: `'add'` / `'remove'` tags
callbacks | <sub>Object</sub> | `{}` | Exposed callbacks object to be triggered on events: `'add'` / `'remove'` tags
maxTags | <sub>Number</sub> | Infinity | Maximum number of allowed tags. when reached, adds a class "tagify--hasMaxTags" to `<Tags>`
editTags | <sub>Object/Number</sub> | {} | `false` or `null` will disallow editing
editTags | <sub>Object/Number</sub> | `{}` | `false` or `null` will disallow editing
editTags.*clicks* | <sub>Number</sub> | 2 | Number of clicks to enter "edit-mode": 1 for single click. Any other value is considered as double-click
editTags.*keepInvalid* | <sub>Boolean</sub> | true | keeps invalid edits as-is until `esc` is pressed while in focus
templates | <sub>Object</sub> | <sub>`wrapper`, `tag`, `dropdownItem`</sub> | Object consisting of functions which return template strings
Expand Down
5 changes: 3 additions & 2 deletions src/parts/defaults.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,9 @@ export default {
},

autoComplete: {
enabled: true, // Tries to suggest the input's value while typing (match from whitelist) by adding the rest of term as grayed-out text
rightKey: false, // If `true`, when Right key is pressed, use the suggested value to create a tag, else just auto-completes the input. in mixed-mode this is set to "true"
enabled: true, // Tries to suggest the input's value while typing (match from whitelist) by adding the rest of term as grayed-out text
rightKey: false, // If `true`, when Right key is pressed, use the suggested value to create a tag, else just auto-completes the input. in mixed-mode this is set to "true"
tabKey: false, // If 'true`, pressing `tab` key would only auto-complete but not also convert to a tag (like `rightKey` does).
},

classNames: {
Expand Down
24 changes: 14 additions & 10 deletions src/parts/dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -395,10 +395,12 @@ export default {
return

// get the "active" element, and if there was none (yet) active, use first child
var selectedElm = this.DOM.dropdown.querySelector(this.settings.classNames.dropdownItemActiveSelector),
selectedElmData = this.dropdown.getSuggestionDataByNode(selectedElm)
var _s = this.settings,
selectedElm = this.DOM.dropdown.querySelector(_s.classNames.dropdownItemActiveSelector),
selectedElmData = this.dropdown.getSuggestionDataByNode(selectedElm),
isMixMode = _s.mode == 'mix';

this.settings.hooks.beforeKeyDown(e, {tagify:this})
_s.hooks.beforeKeyDown(e, {tagify:this})
.then(result => {
switch( e.key ){
case 'ArrowDown' :
Expand All @@ -414,7 +416,7 @@ export default {
}

// if no element was found OR current item is not a "real" item, loop
if( !selectedElm || !selectedElm.matches(this.settings.classNames.dropdownItemSelector) ){
if( !selectedElm || !selectedElm.matches(_s.classNames.dropdownItemSelector) ){
selectedElm = dropdownItems[actionUp ? dropdownItems.length - 1 : 0];
}

Expand All @@ -431,8 +433,10 @@ export default {
if( this.state.actions.ArrowLeft )
return
case 'Tab' : {
let shouldAutocompleteOnKey = !_s.autoComplete.rightKey || !_s.autoComplete.tabKey

// in mix-mode, treat arrowRight like Enter key, so a tag will be created
if( this.settings.mode != 'mix' && selectedElm && !this.settings.autoComplete.rightKey && !this.state.editing ){
if( !isMixMode && selectedElm && shouldAutocompleteOnKey && !this.state.editing ){
e.preventDefault() // prevents blur so the autocomplete suggestion will not become a tag
var value = this.dropdown.getMappedValue(selectedElmData)

Expand All @@ -444,7 +448,7 @@ export default {
case 'Enter' : {
e.preventDefault()

this.settings.hooks.suggestionClick(e, {tagify:this, tagData:selectedElmData, suggestionElm:selectedElm})
_s.hooks.suggestionClick(e, {tagify:this, tagData:selectedElmData, suggestionElm:selectedElm})
.then(() => {
if( selectedElm ){
this.dropdown.selectOption(selectedElm)
Expand All @@ -456,22 +460,22 @@ export default {
else
this.dropdown.hide()

if( this.settings.mode != 'mix' )
if( !isMixMode )
this.addTags(this.state.inputText.trim(), true)
})
.catch(err => err)

break;
}
case 'Backspace' : {
if( this.settings.mode == 'mix' || this.state.editing.scope ) return;
if( isMixMode || this.state.editing.scope ) return;

const value = this.input.raw.call(this)

if( value == "" || value.charCodeAt(0) == 8203 ){
if( this.settings.backspace === true )
if( _s.backspace === true )
this.removeTags()
else if( this.settings.backspace == 'edit' )
else if( _s.backspace == 'edit' )
setTimeout(this.editTag.bind(this), 0)
}
}
Expand Down

0 comments on commit 325df3e

Please sign in to comment.