@wavemaker/app-ng-runtime 11.6.0-next.140456 → 11.6.0-next.140458

app-ng-runtime/components/data/form/fesm2022/index.mjs

@@ -276,6 +276,20 @@ const findInvalidElement = ($formEle, ngForm) => {
         $ele: $ele
     };
 };
+// Function to get the active element markup based on widget type
+const getActiveElement = (element) => {
+    const widgetType = element.getAttribute('widgettype');
+    switch (widgetType) {
+        case 'select':
+            return element.querySelector('select');
+            break;
+        case 'textarea':
+            return element.querySelector('textarea');
+            break;
+        default:
+            return element.querySelector('input');
+    }
+};
 const setTouchedState = (self, ngForm, fieldName) => {
     if (ngForm.valid) {
         return;
@@ -287,15 +301,13 @@ const setTouchedState = (self, ngForm, fieldName) => {
     }
     else {
         let element = self.$element.find(`[wmformfield][key="${fieldName}"]`);
-        // checking for name attribute if the key attribute is not present on formfield
         if (!element.length) {
             element = self.$element.find(`[wmformfield][name="${fieldName}"]`);
         }
-        if (element.length) {
-            element[0].setAttribute('__errormsg', element[0].getAttribute('__validationId'));
-            element[0].querySelector('input')?.setAttribute('aria-invalid', ngForm.invalid);
-            element[0].querySelector('input')?.setAttribute('aria-describedby', element[0].getAttribute('__validationId'));
-        }
+        element[0].setAttribute('__errormsg', element[0].getAttribute('__validationId'));
+        let activeElement = getActiveElement(element[0]);
+        activeElement?.setAttribute('aria-invalid', ngForm.invalid);
+        activeElement?.setAttribute('aria-describedby', element[0].getAttribute('__validationId'));
         ngForm.markAsTouched();
     }
 };
@@ -1675,20 +1687,38 @@ class FormFieldDirective extends StylableComponent {
         this._activeField = true;
         $($evt.target).closest('.live-field').addClass('active');
     }
-    _onBlurField($evt) {
-        $($evt.target).closest('.live-field').removeClass('active');
-        const ele = this.nativeElement.querySelector('p.text-danger');
-        // Fix for [WMS-23959]: ADA issue - adding aria-describedby, aria-invalid, __errormsg attributes only when the form field is invalid , else removing the attributes
+    // Function to get the active element markup based on widget type
+    getActiveElement() {
+        const widgetType = this.nativeElement.getAttribute('widgettype');
+        switch (widgetType) {
+            case 'select':
+                return this.nativeElement.querySelector('select');
+                break;
+            case 'textarea':
+                return this.nativeElement.querySelector('textarea');
+                break;
+            default:
+                return this.nativeElement.querySelector('input');
+        }
+    }
+    setAriaAttributes() {
+        const element = this.getActiveElement();
         if (this.ngform.controls[this._fieldName].invalid && this.ngform.controls[this._fieldName].touched && this.form.isUpdateMode) {
             this.nativeElement.setAttribute('__errormsg', `${this.nativeElement.getAttribute('__validationId')}`);
-            this.nativeElement.querySelector('input')?.setAttribute('aria-invalid', `${this.ngform.controls[this._fieldName].invalid}`);
-            this.nativeElement.querySelector('input')?.setAttribute('aria-describedby', `${this.nativeElement.getAttribute('__validationId')}`);
+            element?.setAttribute('aria-invalid', `${this.ngform.controls[this._fieldName].invalid}`);
+            element?.setAttribute('aria-describedby', `${this.nativeElement.getAttribute('__validationId')}`);
         }
         else {
             this.nativeElement.removeAttribute('__errormsg');
-            this.nativeElement.querySelector('input')?.removeAttribute('aria-invalid');
-            this.nativeElement.querySelector('input')?.removeAttribute('aria-describedby');
+            element?.removeAttribute('aria-invalid');
+            element?.removeAttribute('aria-describedby');
         }
+    }
+    _onBlurField($evt) {
+        $($evt.target).closest('.live-field').removeClass('active');
+        const ele = this.nativeElement.querySelector('p.text-danger');
+        // Fix for [WMS-23959]: ADA issue - adding aria-describedby, aria-invalid, __errormsg attributes only when the form field is invalid , else removing the attributes
+        this.setAriaAttributes();
         this._activeField = false;
         this._triggeredByUser = false;
         this._clicktriggeredByUser = false;
@@ -1897,16 +1927,7 @@ class FormFieldDirective extends StylableComponent {
                 this.app.notify('captionPositionAnimate', { displayVal: hasValue, nativeEl: captionEl, isSelectMultiple: this.formWidget && this.formWidget.multiple, isFocused: this._activeField });
             }
             // Fix for [WMS-23959]: ADA issue - adding aria-describedby, aria-invalid, __errormsg attributes only when the form field is invalid , else removing the attributes
-            if (this.ngform.controls[this._fieldName].invalid && this.ngform.controls[this._fieldName].touched && this.form.isUpdateMode) {
-                this.nativeElement.setAttribute('__errormsg', `${this.nativeElement.getAttribute('__validationId')}`);
-                this.nativeElement.querySelector('input')?.setAttribute('aria-invalid', this._triggeredByUser && this.ngform.controls[this._fieldName].invalid ? 'true' : 'false');
-                this.nativeElement.querySelector('input')?.setAttribute('aria-describedby', `${this.nativeElement.getAttribute('__validationId')}`);
-            }
-            else {
-                this.nativeElement.removeAttribute('__errormsg');
-                this.nativeElement.querySelector('input')?.removeAttribute('aria-invalid');
-                this.nativeElement.querySelector('input')?.removeAttribute('aria-describedby');
-            }
+            this.setAriaAttributes();
             this.form.onFieldValueChange(this, val);
             this.notifyChanges();
             // Do mark as touched, only incase when user has entered an input but not through the script. Hence added mousedown event check