Tagify problems when reset the form

I have a modal window with a form. Inside the form there is a tagify component that receives dynamic data. The problem occurs at the moment when the form is reset. The data inside tagify disappears, including dynamic data that should not be reset when the form is reset.

For clarity, I created additional inputs to show what it looks like:
13

The upper input contains the same dynamic values as the tagify component. The lower input has dynamic values in the form of tagify component values. The form is reset when the modal window closes, resulting in the following result:
12

As you can see, after resetting the form, the dynamic data inside tagify disappears, so the tagify input and the lower input are empty. The upper iput, after resetting the form, remains with the data, as it should be.

Code from the example:

 <input id="text1" name="text1" type="text" class="form-control" dmx-bind:value="detail_thread.data.access_thread.where(`creator`, 1, '!=').groupBy(`user_id`).keys()">
 <input type="text" class="form-control form-control-lg" id="access_users_thread" name="access_users_thread" aria-describedby="access_users_thread_help" placeholder="Выберите пользователя" is="dmx-tagify" dmx-bind:data="array_access_contact.value.where(`creator`, 1, '!=')" tag-text="fio" tag-secondary="position" tag-value="user_id" nocustom="true" min-chars="0" max-items="30" dmx-bind:value="detail_thread.data.access_thread.where(`creator`, 1, '!=').groupBy(`user_id`).keys()">
 <input id="text2" name="text2" type="text" class="form-control" dmx-bind:value="access_users_thread.values">

This creates very big problems on the fronted. Does anyone know how to work around this problem?

We implemented this behavior some time back - Tagify will not clear data on form reset the tagify component will call the removeAllTags() method on form reset.

Maybe we should change that again, so that it behaves as a regular html input element on reset @patrick

2 Likes

I don’t know about the others, but my tagify component is used everywhere as a regular input. Therefore, my users and I expect the same behavior from him as with a normal input. Perhaps if someone has a different scenario, it makes sense to make a toggle switch that gives a choice of behavior when resetting the form? But in the current version, big problems arise, because data loss occurs due to non-standard behavior when resetting the form.

@patrick, could you tell me where it is necessary to correct this behavior so that tagify behaves exactly like a normal input when resetting the form and does not delete all the contents, leaving the user’s data, if any? I’ll fix it in my files.

Due to the current behavior, I have big problems with users. If I disable form resetting, they are very indignant that the usability of the application becomes bad because of this. If the form reset remains enabled, the data contained in the tagify field is lost, which causes even bigger problems, because the user can save the form after the reset and then his data will be lost forever.

Bump

I get a very lot of tickets from my users because of this problem. How can this problem be solved? I will be grateful for any solution.

Hello, we are looking for a solution. The issue is also that the tagify component itself doesn’t support this behavior, so we have to keep state and remember default values somewhere within our wrapper and restore on form reset.

We will notify you here, when we have an update.

1 Like

For now, as a workaround you can use a variable to store the initial value from the database and then add a form reset dynamic event > add tags to the tagify component > use the variable value.

2 Likes

I’ve got a version here that you can test: dmxTagify.zip (2.9 KB)

1 Like

@patrick when installing the update I get errors. This is an incomplete list (11 errors in total), if necessary, I can screen everything:

@Teodor, thank you for this option. And although want this behavior to be implemented in the library itself, but your version works. This once again confirms that with a Wappler, you can always find a workaround.

Do you have an older version of App Connect on the page?

Found the issue, here an update.

dmxTagify.zip (2.9 KB)

The old mistakes disappeared, but new ones appeared. Currently, there are no errors when loading the page, but when data is loaded into the tagify component, the following errors appear:

No, the Wappler and all components have been updated to the latest version.

However, I am using the local version of tagify:
tagify.zip (46.1 KB)

The element has the following settings:

<input type="text" class="form-control form-control-lg" id="access_users_thread" name="access_users_thread" aria-describedby="access_users_thread_help" placeholder="" is="dmx-tagify" dmx-bind:data="array_access_contact.value.where(creator, 1, '!=')" tag-text="fio" tag-secondary="position" tag-value="user_id" nocustom="true" min-chars="0" max-items="30" dmx-bind:value="detail_thread.data.access_thread.where(creator, 1, '!=').groupBy(user_id).keys()">

I found the issue for the first error, I think the second is caused due to the first one.

Here the fix: dmxTagify.zip (2.9 KB)

1 Like

Perfect! Now everything works fine and the behavior has become consistent with other inputs. Just great! Thank you very much! :beers:

1 Like

This has been fixed in Wappler 5.6.0