Tagify - show suggestions on focus not working

Question

In an asp.net Core web application I'm using the Tagify component (Tagify home page & examples) for showing tags in input and textarea controls. Following an example from the link (see under: Same using custom suggestions) I have the following code:

<div class="col-auto" title="Start typing to show available tags ...">
    <textarea name="tbSearch2" placeholder="Filter by tags" id="tbSearch2" class="form-control email-filter" rows="1"></textarea>
</div>

and javascript (ajax executes only once -> on page load):

var tagslist = '';
    $.ajax({
        'url': "Email/GetTags",
        'success': function (data) {
            tagslist = data;

            // load tags for searching
            var tagify1 = new Tagify(document.querySelector('textarea[name=tbSearch2]'), {
                tagTextProp: 'name',
                enforceWhitelist: true,
                delimiters: null,
                whitelist: tagslist,
                editTags: false,
                dropdown: {
                    mapValueTo: 'name',
                    searchKeys: ['name'],
                    maxItems: 20,           // <- maximum allowed rendered suggestions
                    classname: 'tags-look', // <- custom classname for this dropdown, so it could be targeted
                    enabled: 0,             // <- show suggestions on focus
                    closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected
                },
            });
        }
    });

The tags work, but only when the user starts typing some text into the textarea. The dropdown does not appear immediately when Tagify control has focus (as in the example in the link in the beginning of this post).

Any ideas what I'm doing wrong?

*note: there are no errors in the browser console.

Answer 1

You can try to check the versions of tagifycss and js, Here is a working demo:

GetTags action:

public List<string> GetTags() 
        {

            return new List<string>{ "A# .NET", "A# (Axiom)", "A-0 System", "A+", "A++", "ABAP", "ABC", "ABC ALGOL", "ABSET", "ABSYS", "ACC", "Accent", "Ace DASL", "ACL2", "Avicsoft", "ACT-III", "Action!", "ActionScript"};
        }

js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/tagify/4.3.0/tagify.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tagify/4.3.0/tagify.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script>
        var tagslist = '';
        $(function () {
            $.ajax({
                'url': "GetTags",
                'success': function (data) {
                    tagslist = data;

                    // load tags for searching
                    var tagify1 = new Tagify(document.querySelector('textarea[name=tbSearch2]'), {
                        tagTextProp: 'name',
                        enforceWhitelist: true,
                        delimiters: null,
                        whitelist: tagslist,
                        editTags: false,
                        dropdown: {
                            mapValueTo: 'name',
                            searchKeys: ['name'],
                            maxItems: 20,           // <- maximum allowed rendered suggestions
                            classname: 'tags-look', // <- custom classname for this dropdown, so it could be targeted
                            enabled: 0,             // <- show suggestions on focus
                            closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected
                        },
                    });
                }
            });
        })
        
    </script>

result: