Tabulation in dropdown makes tagify fail

[Massi-X]

Prerequisites

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed

💥 Demo Page

https://jsbin.com/kedanixiso/edit?html,js,console,output
https://jsbin.com/noxuzusave/1/edit?html,js,console,output

Explanation

Go on the demo page and tab on the tagify input so that the dropdown opens. Continue tabbing, the first value is inserted. This should not happen because the first value ("1") is already present in the input. This happens because when tabbing (and only when tabbing, this does not happen when using the mouse to select) the name is passed as value instead of the real value in transformTag. This also has the side effect or creating a corrupted output list.

I suggest not to fix this, but simply to disable select with the tab key cause this is an issue for impaired users (how are they supposed to escape the dropdown after it opened?) I know they can use the esc key it but it is not really intuitive, it would be better to close the dropdown with another tab click, and if the user really wants to select something, he obviously will do with arrows/enter keys.

• What is the expected behavior?
  Inserting a value with tab key should work normally

• What is happening instead?
  The name is passed instead of the value in transformTag

[Massi-X]

PS. Updated the URL cause I used the wrong one

[Massi-X]

And that's an updated JSBin with the proposed solution https://jsbin.com/veyiqezobo/edit?html,js,console,output

[yairEO]

Thank you for the detailed analysis!

The fix should be done in Tagify's source code though. I will work on it.

[Massi-X]

Thank you! I found that this also happens in some other situations:

• If the mode is set to "select" the value is not selected (correct), but the dropdown remains open
• If the mode is set to "select" and userInput to "false" the value is not selected and the dropdown closes (all correct)

I think the relevant code is here events.js#L502

And as a bonus 😂 I can see that the blur is somehow not executed (the border is still blue after leaving the input).

[yairEO]

BTW, this is the correct way to use Tagify with objects in the whitelist:

var tagify = new Tagify(input,
    {
        tagTextProp: "name",
        dropdown: {
            enabled: 0,
            includeSelectedTags: true,
            mapValueTo: "name"
        },
        whitelist: [
            {
                "value": "1",
                "name": "One",
                "title": "One",
            },
            {
                "value": "2",
                "name": "Two",
                "title": "Two",
            },
            {
                "value": "3",
                "name": "Three"
                "title": "Three",
            }
        ],
    })

you should define the tagTextProp & drpodown.mapValueTo both to the same property of the whitelist you want to visually render to the user, since the value is just a meaningless number to the user.

also added title to each item so when hovering the tag it will show it instead of the default value

[Massi-X]

Yeah this was a stripped down version of the project and in production I'm using it as you suggested (in scripts.js)

[Massi-X]

Mmmmh this sounds incredibly similar to #1279 (and the very latest post suggestion works). I kepp my point though, Tab should not select things, but escape from dropdown. Also, the value inserted is wrong anyway and this should not be the case.

Thank you anyway, no need to rush for this