FIX TagField triggers edit form change without changes

[sabina-talipova]

Description

The tag field input works differently than a simple text field and does not retain the new value after selecting or creating a new tag. Therefore, it is necessary to track the tag itself rather than typing in the input field. An additional method has been added that is called when a new tag is added or created.

Steps to reproduce the problem:

• Create a new Blog and add a new Blog post to it (easy way to get a tag field).
• Go to Post options tab.
• Start typing in the Categories or Tags field.
• The Save button is highlighted in color, which indicates that there are changes on the page.
• When you try to go to another page, a message about unsaved data is displayed.
• Even if the text is removed from the field, the message about unsaved data and the highlighted Save button remain.

Steps to test:

• Create a new Blog and add a new Blog post to it.
• Go to Post options tab.
• Start typing in the Categories or Tags field.
• The Save button didn't change.
• Select suggested option in dropdown list.
• New tag was added.
• If there were not any tags initially, if you add and remove tag, Save button isn't highlighted.
• The Save button is highlighted in color, which indicates that there are changes on the page.

Parent issue

• TagField triggers edit form change state when there are no changes #247

[GuySartorelli]

This works in an entwine context (such as on a blog page) - but it doesn't work in a react context (such as when the TagField is inside an elemental block).

There are two ways you could approach this from here:

1. Just reinstate the CMS 4 behaviour - i.e. tagfield input fields are always ignored.
   • Remove all of the changes you've made
   • in the client/src/legacy/entwine/TagField.js file make this change:

     - opts.ignoreFieldSelector += ', .ss-tag-field .Select :input';
     + opts.ignoreFieldSelector += ', .ss-tag-field :input';

2. Make this correctly detect changes in react
   • Basically do what you have done, but don't add "no-change-track" in PHP or in the entwine code
   • Handle all of the "no-change-track" classname stuff inside the react component itself
   • Don't add "no-change-track" to the holder element at all, and in fact remove the getChangeTrackerOptions() section. Instead, just add or remove the "no-change-track" classname from the appropriate input component directly
   • Note that there are two :input fields in the react select component. You want to add the classname to both of them initially, and only remove it from the one that holds the actual value, not the one you type into.
   • you may need to refer to the react select docs for how to add class names to specific components within the select component.

Obviously option 1 is way easier, but option two is a slightly better user experience. I'll leave it to you to choose which you want to try.

[sabina-talipova]

Just reinstate the CMS 4 behaviour - i.e. tagfield input fields are always ignored.

I think it's bad idea. I suppose that it was made by mistake. Our user expect that all fields track changes, but it's annoying when they track changes for some field with ability to select options when user just start to typing.

[sabina-talipova]

Note that there are two :input fields in the react select component. You want to add the classname to both of them initially, and only remove it from the one that holds the actual value, not the one you type into.

changetracker doesn't care about any input fields if they are not active.

[sabina-talipova]

but it doesn't work in a react context (such as when the TagField is inside an elemental block).

There are more deep problem then it can be covered by this task. Using TagFields in Elemental Area doesn't work at all.
I created new ticket for this.

• TagField used in Elemental Area loses its value on blur #252

[GuySartorelli]

Works locally.

At some point in the future we'll probably want a cleaner approach we can use across multiple react components but for now since this is the only one that appears to need such a workaround, this will do just fine.