Tagify values not submitted within Form Repeat

Wappler General Bugs
1

Wappler Version : 7.3.0
Operating System :
Server Model:
Database Type:
Hosting Type:

Expected behavior

What do you think should happen?

The values of a tagify element (default) should be submitted as part of the form payload, even if the tagify values are programmatically set rather than the user choosing.

Actual behavior

What actually happens?

Tagify elements with a dmx-bind:valueare not submitted with the form if the user does not engage with the element.

How to reproduce

  • Detail a step by step guide to reproduce the issue
  • A screenshot or short video indicating the problem
  • A copy of your code would help. Include: JS, HTML.
  • Test your steps on a clean page to see if you still have an issue

I made this simple content page that demonstrates the issue. The tagify is within a form repeat and has a value of 1, which is a value option from the test data. 3 rows are initially loaded, each with the same value for the tagify element.

After clearing the dev console screen, I submit the form to a server connect that does nothing – just returns success. You can see there is no payload on that submit.

I then start select additional items in the tagify elements, and those that are “touched” get added to the payload.

Adding rows the the form repeat produces the issue again – because I have not touched those elements.




<dmx-serverconnect id="test" url="/api/1/4/challenges/get_challenges" dmx-param:challenge_id="2"></dmx-serverconnect>
<form id="form1" is="dmx-serverconnect-form" method="post" action="/api/utils/success">
    <button id="btn2" class="btn" dmx-on:click="formRepeat1.add()">add</button>
    <button id="btn1" class="btn" type="submit">submit</button>
    <div is="dmx-form-repeat" id="formRepeat1" dmx-bind:items="test.data.challenges">
        <input is="dmx-tagify" id="tagify1" name="tagify1" dmx-bind:data="test.data.challenges" tag-text="title" tag-value="challenge_id" keep-invalid="true" min-chars="0" dmx-bind:value="1">
    </div>
</form>
```
3

Seems that tagify doesn't update its internal state on init. Please test it with the following update: dmxTagify.zip (10.1 KB)

4

This works in my test page, and so far seems to have resolved my core issue. I’ll be testing more today and will let you know if anything comes up! Thanks for the quick look at this Patrick, it is very much appreciated.

Maybe related to this:


dmxTagify.js:7 Uncaught TypeError: Cannot read properties of null (reading 'name')
    at s._formdataHandler (dmxTagify.js:7:10031)
    at s._send (dmxAppConnect.js:9:72062)
    at s._formSubmit (dmxAppConnect.js:9:71259)
    at s._submit (dmxAppConnect.js:9:34029)
    at s.submit (dmxAppConnect.js:9:33243)
    at Object.keys.forEach.data.<computed> (dmxAppConnect.js:9:21289)
    at dmxAppConnect.js:9:14166
    at dmxAppConnect.js:9:11407
    at dmx.parse (dmxAppConnect.js:9:11491)
    at s.parse (dmxAppConnect.js:9:31524)
```

I am seeing this error (this is what originally had me looking at the form submit). It occurs when I submit the form with the form repeat and tagify elements. The test page didn’t exhibit the error, so maybe not related.

I don’t think it is causing me any actual issue, but still might be something to be addressed (either on my side or yours). The tagify element is within a collapse. The tagify is within a div with dmx-show.

5

Tagify listens to the formData event from the form to update the values and make the data an actual array. The error is maybe some problem when a tagify component was destroyed and it didn't remove the event listener correctly. I'm not exactly sure if that is the case with this error, but the _formdataHandler method seems to be called and the this.$node seems to be null causing the above error.

I've updated the code to keep an reference to the form in the component so that it can remove the event listener even when the input isn't in the DOM anymore.

dmxTagify.zip (10.1 KB)

Let me know if that removes the error. Otherwise, I could add an extra check in the event handler to check if the input node is still set and in the form.

6

No change with that update:

/*!
App Connect Tagify
Version: 2.0.5
(c) 2025 Wappler.io
@build 2025-09-12 17:30:33
*/

The error is still thrown. The basic hierarchy is form > Accordion Cards > form repeat > card > collapse > div w/show > tagify

7

Found the issue, the order in destroy was wrong, here the update.

dmxTagify.zip (10.1 KB)

8

That took care of it. Thanks again Patrick.