Tagify: Get value of the text being written in (not yet a tag)

[ivanbozic]

Hi! I have the following use case. I want to submit a form when the user presses "Return" while inside a Tagify field. I also do not want to interrupt normal user behavior so I don't want to submit the form when the user is in the middle of adding a new tag or editing a previous tag.

I have hooked in to the keydown event of the Tagify element, am checking for the "Enter" key code, but the issue I am running into is in the check whether the user has written something in. I could not find a method where I can see whether the current state of the Tagify field is:

[some label] [other label] new label|

In the case above, the user is just writing in the "new label" and upon pressing Return, Tagify will add that tag and my method will not do anything. But the next Return being pressed would be in this state:

[some label] [other label] [new label] |

And I would like to see whether the user has anything written in which has not yet been added as a tag. Additionally, this is not a mix-mode situation.

Any help? Am I missing anything?

Thank you!

[yairEO]

1. Check tagify.state.inputText for a value, which indicates the user typed some text but have yet to create a tag from it

2. Check tagify.state.editing is not false

If both above are false, it is safe to proceed with submitting the form

I would also place a timeout around the form.submit call, to make sure the user did not press "enter" for selecting a tag from the suggestions list. the tag needs a moment to be appened to the DOM, and the (keydown) event is fired prior to that.

[ivanbozic]

Thank you @yairEO for the prompt response. I have an issue where whatever I do state.inputText from the Tagify instance is undefined. Doesn't matter what I type in or what the state of the instance is.

Here's a code snippet where I am doing the check.

this.LABELS.on('keydown', (event) => {
    let keyPressed = event.detail.originalEvent.key;

    if (keyPressed == "Enter") {
        let inputText = event.detail.tagify.state.inputText;
        let isEditing = event.detail.tagify.state.editing;

        if (!inputText && !isEditing) {
            console.log("✅ SUBMIT FORM!");
        }
    } else {
        console.log("🚫 DO NOT SUBMIT!");
    }
});

[yairEO]

Which version of Tagify are you using? (state.inputText is relatively a new thing)

[ivanbozic]

I am using v3.20.0.

[yairEO]

Could you create a jsbin fork with basic setup so I could examine?

[ivanbozic]

@yairEO, I created a JSBin and it worked there. Just to confirm, I updated my local package from 3.20.0 to 3.20.3 and now it works fine. Was state.inputText added that recently?

Thank you for helping me track this down!

[yairEO]

Yes, it was added last week :)

I'm happy it works for you and hope you are pleased with Tagify

[ivanbozic]

Awesome, thank you again for the prompt response and for Tagify in general, it's really a great library! 👏