In select mode 'input' event is triggered only when no tag is selected and user is typing

[dirslashls]

Prerequisites

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

💥 Demo Page

https://jsbin.com/jekuqap/edit?html,js,output

React issue template: https://jsbin.com/tulolunuwu/edit?html,js,console,output

Notice that the console messages are displayed only when you clear out the selection completely and enter something. But if an option is already selected and you try to modify, there are no messages in the console.

Explanation

• What is the expected behavior? The registered 'input' callback should always be called in select mode when user is making changes.

• What is happening instead? Only when no tag is selected and user tries to type the input callback is called. But if there is already a tag and user is trying to alter it (backspace or completely clear it), then the input callback is not being called.

This is continuation of #1314 (thank you for clarification and a fix). I tried 4.23.0 and what I notice is that, in select mode, there are two span elements one within the tags element and one within the tag element. When no tag is selected, the span within the tags is being used and this triggers the input callbacks. But when there is already a tag selected and user tries to use backspace or completely clear, the input callback is not triggered.

I am essentially trying to use the input callback to populate the whitelist based on what has been typed so far.

• What error message are you getting?

There is no error. Just that the input callback is not being called in both cases.

[yairEO]

I am reluctant to make any change to current behavior because in select mode, when a tag has been selected, you, as a developer, should listen to the edit:input event, because you are effectively editing a selected tag, and not inputting text which will become a tag.

It's a subtlety which might be intuitive at first but I find it better to keep things working as they are now, as the behavior of select mode is aligned with the other modes, even though the visual appearance of select mode is difference as there can only be one tag selected so it doesn't look as a tags look in other modes because it mimics how a real select looks like.

To sum it up - please listen to them both:

tagify.on('input edit:input', e => console.log(e.type, e.detail))

[dirslashls]

Thank you @yairEO , it worked. Only thing is that in the input callback I had to use evt.detail.value and in the edit:input callback evt.detail.data.newValue