after selecting tag cursor go to beginning of input field

[Amarjeetdev012]

when I am selecting from dropdown suggestion input field cursor move to beginning in input field.

        fetch("data").then(async (response) => {
            const data = await response.json();
            const keys = Object.keys(data.people[0]); // extract keys from the first object in the array
            var input = document.querySelector("#mixedinput"),
                tagify = new Tagify(input, {
                    mode: "mix", //Use `select` for single-value dropdown-like select box. See `mix` as value to allow mixed-content. The `pattern` setting must be set to some character.
                    pattern: /@|#/, //Validate input by RegEx pattern (can also be applied on the input itself as an attribute).
                    whitelist: keys, // An array of allowed tags.
                    dropdown: {
                        //dropdown setting 55
                        position: "text", // 'manual' | 'text' | 'input' | 'all';
                        includeSelectedTags: true, //enable tag to write again in tags field.
                        classname: "customSuggestionsList", // Custom class name for the dropdown suggestions list. for css use,
                    },
                });

            tagify.on("dropdown:show", function (data) {
                tagify.dropdown.show();
            });

            // The component has received focus.
            tagify.on("focus", function () {
                tagify.dropdown.show();
            });

            var arr = [];

             tagify.on('dropdown:select', function (e) {
                 console.log('e', e);
                 var value = e.detail.data
                 arr.push(value)
                 tagify.addMixTags(arr)
                 arr.pop()
                // tagify.dropdown.hide()
             });
        });

[yairEO]

BTW, it makes no sense to write:

tagify.on("dropdown:show", function (data) {
  tagify.dropdown.show();
});

Because at this point the suggestions dropdown is already shown

[c33k]

@yairEO I have a similar problem. In my code (React), I have a trigger button beside my tagify input. When the user clicks this button, I set the focus back to the tagify input and then I call the dropdown.show() (code bellow). After the user selects the dropdown option, the cursor is sent back to the beginning. This doesn't happen when I trigger the dropdown opening naturally typing "@", for instance. Only when I use the trigger.

Is there any way you recommend for using a trigger with tagify? I tried to find it but couldn't.

My trigger is something like this:

<Button
          onClick={() => {
            if (
              !tagifyRef.current ||
              !(tagifyRef.current.DOM && tagifyRef.current.dropdown)
            ) {
              return;
            }

            tagifyRef.current.DOM.input.focus();

            setTimeout(() => {
              tagifyRef.current?.dropdown.show();
            }, 0);
          }}
        />

I saw that internally you have some saving of the window selection (setStateSelection, or something like that), but this is not exposed. I had to replace the usage of "show" by "execCommand" adding the "@" character in the field, which opens the dropdown. But I doubt this is the best solution.

[yairEO]

@c33k - can you make a minimal reproduction demo on jsbin?