Tagify OnChange Event Does Not Always Work

Wappler General Bugs
1

Wappler Version : 5.2.2
Operating System : W10
Server Model: NodeJS

We have replace select2 in one of our projects with tagify. But we are seeing an issue with selecting items.
After selection, the dmx-on:change event fails to trigger, causing the input to just show the selected value, and UI appears stuck.
The setup we have is that we run a SC on change event, which then clears the input on success.
Users of the app have reported this occasional bug as well.

There is no defined way to reproduce this, but to keep trying by refreshing the page, and wait for it to get stuck.

2

Can you post your tagify code please?

Can you post a screenshot of this also?

3 
<input dmx-bind:disabled="scGetAllProducts.state.executing || scDoDomainMapping.state.executing" is="dmx-tagify" id="txtProductID" class="form-control h-auto" dmx-bind:data="scGetAllProducts.data.qList" tag-text="cpc_product_name +' | '+ cpc_product_code" tag-value="cpc_product_code" min-chars="0" dmx-on:changed="scDoDomainMapping.load({cpc_product_code: value, domain_id: ddDomain.data.domain_id})" nocustom="true" mode="select">

What I meant is that user just sees the value selected in the input, when it should clear-out within a second or so. The UI itself does not hang or become unresponsive.

4

Can you make a short video showing the issue?

5

Like I wrote, there is no way to reproduce this, but to keep trying it.
The problem simply is that CHANGE even does not trigger occasionally.

I can try a few time to see if I can reproduce and capture it on video.

6

What does this changed event do? It reloads a server action. Did you verify in the dev tools the server action is not running actually?

7

In this context, it just loads the server action with certain GET params to map the selected item in a table.

Yes. And there are no errors in console either.

8

@sid Just in case, the issue you are facing is not similar to this?

9

Unfortunately not in this case.
But I think I have seen the ID mix-up recently as well. Don’t remember exactly, will check with one of my devs and get back to you on the other post.

10

Have sent you a video privately.

11

Instead of changed event try using the change or updated event. Tagify doesn’t detect user changes very well and that could cause the changed event not being triggered. The updated event is always triggered when the value changes and the change event is a custom event from the tagify plugin to detect changes.

12

One other issue I noted was that any leading spaces in the option value or description values can cause issues occasionally. I’d recommending trimming() by default.

13

Updated event worked. Thanks.

14

I have just spent about 3 hours trying to figure out why my tagify component suddenly stopped working after no code changes to it in 3 months.

I tried changing CDNs, i tried specific CDN versions instead of the default 4.17.9, i tried switching from on-changed to on-change to on-updated

No matter what i tried, every time i chose a value, and submitted my form it failed, saying the ID was incorrect, and the ID came from the value selected in the tagify element.

After attempting everything else, i realised it was only doing this on about 6 products, when chosen, and all the others worked as expected.
When choosing any of the 6 offending products, it would look fine and as soon as i changed focus to another form input the ID would just change itself to the tag-text instead of the tag-value.

Finally I found an issue, if there is a trailing space in your tag-text it does this, i literally hate computers right now, what a silly reason to break the entire thing, anyway in case anyone else hits the same issue, dont waster 3 hours, check your database or api data and make sure none have trailing spaces at all.

3 Likes