DO NOT MERGE - Hitting tab should autocomplete with highlighted suggestion.

[jzohrab]

DO NOT MERGE - this has some problems!

Before this change, hitting Tab doesn't cause a tag to be created in the following situation:

Hitting Tab does nothing, the selected suggestion just remains highlighted.

My tagify for this control is as follows:

    const tagify = new Tagify(input, {
      placeholder: 'Parents',
      editTags: false,
      autoComplete: { enabled: true, rightKey: true, tabKey: true },
      enforceWhitelist: false,
      whitelist: [],
      dropdown: {
        enabled: 2,  // Min 2 chars - this doesn't seem to work.
        maxItems: 20,
        mapValueTo: 'suggestion',  // Field to display
        placeAbove: false,  // Always put the dropdown below the textbox
      },
    });  // end tagify

After this change, hitting Tab in the following situation completes the tag, and then hitting Tab again actually creates the tag, as expected:

@yairEO - I'm not sure if I'm misinterpreting something in the code ... I can't follow why the two OR'd conditions would "not-ed" with the ! . Perhaps the original code works in some other situation, but not mine. Let me know if this is incorrect. :-) Cheers!

[jzohrab]

Re the "DO NOT MERGE" :-( -- the selection doesn't use the dropdown "value" when I hit tab, it uses the suggestion itself, which isn't valid. My suggestion list (whitelist) has format [ { value: "blah", suggestion: "blah (extra data)" }]. When I select a suggestion and hit Return, just the value is used for the tag, which is correct, but when I hit Tab, it uses suggestion, which is obviously bad.

Example: dropdown shown:

Hit return in the above situation (correct, only the "value" is used):

Hit Tab in the same situation:

I feel this PR is partly on the right track, but you've obviously used getMappedValue for some specific purpose, so I'm reluctant to change it.

[yairEO]

Use these settings:

var tagify = new Tagify(input, {
  dropdown: {
    enabled: 1,
    mapValueTo: 'suggestion',
    highlightFirst: true,
    searchKeys: ['value', 'suggestion']
  },
  whitelist: [ 
    {value: "blah", suggestion: "blah (extra data)"}
  ]
})

See jsbin demo here

[jzohrab]

Huh, interesting, adding autoComplete: { enabled: true, rightKey: true, tabKey: true }, results in tab not working, removing it fixes it.

Thanks for the demo link.