Updating to Core version 3.0.6 from 2.0.76 broke custom field validation on submit

[mnahmias]

Expected Behaviour

Clicking submit triggers validation on the custom field

Actual Behaviour

Clicking submit triggers validation on non custom fields as expected, but does not trigger validation on the custom field

Reproduce Scenario (including but not limited to)

Steps to Reproduce

• Extend the textinput v1 core component from a maven project
  • Replace occurrences of the class name "textinput" to match the new custom component's name
    • Such as <div class="cmp-adaptiveform-textinput__label-container"> becomes <div class="cmp-adaptiveform-newcomponentname__label-container">
  • Similarly override and update the clientlibs.site JS and CSS's file names & contents to target the new class names

AEM Version (mention the exact version in case of cloud SDK)

2023.12.14697.20231215T125030Z-231200

AEM Forms Version

2023.10.25.00-231200

[rismehta]

@mnahmias, would you mind providing the full code for the custom core component you developed? Given the different BEM structure of the component, I presume you've crafted a custom view layer akin to the one illustrated in this example: https://github.com/adobe/aem-core-forms-components/blob/master/it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/textinput/v1/textinput/clientlibs/site/js/textinputview.js#L29.

If you've implemented something similar, and still facing an issue, could you kindly share the complete sample ? This would assist us in replicating the issue on our end.

[mnahmias]

Here's the custom field js I have currently

(function() {

    "use strict";
    class EsriInput extends FormView.FormFieldBase {

        static NS = FormView.Constants.NS;
        /**
         * Each FormField has a data attribute class that is prefixed along with the global namespace to
         * distinguish between them. If a component wants to put a data-attribute X, the attribute in HTML would be
         * data-{NS}-{IS}-x=""
         * @type {string}
         */
        static IS = "adaptiveFormEsriInput";
        static bemBlock = 'cmp-adaptiveform-esriaddresslookup'
        static selectors  = {
            self: "[data-" + this.NS + '-is="' + this.IS + '"]',
            widget: `.${EsriInput.bemBlock}__widget`,
            label: `.${EsriInput.bemBlock}__label`,
            description: `.${EsriInput.bemBlock}__longdescription`,
            qm: `.${EsriInput.bemBlock}__questionmark`,
            errorDiv: `.${EsriInput.bemBlock}__errormessage`,
            tooltipDiv: `.${EsriInput.bemBlock}__shortdescription`
        };

        constructor(params) {
            super(params);
        }

        getWidget() {
            return this.element.querySelector(EsriInput.selectors.widget);
        }

        getDescription() {
            return this.element.querySelector(EsriInput.selectors.description);
        }

        getLabel() {
            return this.element.querySelector(EsriInput.selectors.label);
        }

        getErrorDiv() {
            return this.element.querySelector(EsriInput.selectors.errorDiv);
        }

        getTooltipDiv() {
            return this.element.querySelector(EsriInput.selectors.tooltipDiv);
        }

        getQuestionMarkDiv() {
            return this.element.querySelector(EsriInput.selectors.qm);
        }

        setModel(model) {
            super.setModel(model);
            if (this.widget.value !== '') {
                this._model.value = this.widget.value;
            }
            this.widget.addEventListener('blur', (e) => {
                this._model.value = e.target.value;
                this.setWidgetValueToDisplayValue();
                this.setInactive();
            });
            this.widget.addEventListener('focus', (e) => {
                this.setActive();
                this.setWidgetValueToModelValue();
            });
        }
    }

    // Expose TextInput under v1 for custom extensions
    FormView.v1 = Object.assign(FormView.v1 || {}, { EsriInput: EsriInput });

    FormView.Utils.setupField(({element, formContainer}) => {
        return new EsriInput({element, formContainer})
    }, EsriInput.selectors.self);

})();

[rismehta]

@mnahmias, I've recently developed a new core component utilizing the code you supplied, and I've confirmed that validations are functioning as expected. You can review the pull request here: #1179.

It seems that the client library category might have been overlooked in either the page component or the template policies. You can search for the client library category core.forms.components.it.addresslookup.v1.runtime in the PR to identify where it needs to be included.

In our latest release, version 3.0.8, we have eliminated the code related to exposing individual component classes to FormView. You can find more details about this update in the release notes: https://github.com/adobe/aem-core-forms-components/releases/tag/core-forms-components-reactor-3.0.8

[mnahmias]

Thanks, this resolved our issue