@descope/web-components-ui 3.19.0 → 3.20.0

package/src/components/descope-recaptcha/RecaptchaClass.js

@@ -1,6 +1,6 @@
 import { injectStyle } from '@descope-ui/common/components-helpers';
 import { draggableMixin } from '../../mixins';
-import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { createBaseInputClass } from '../../baseClasses/createBaseInputClass';
 import { compose } from '../../helpers';
 import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
 
@@ -8,13 +8,19 @@ export const componentName = getComponentName('recaptcha');
 
 const observedAttributes = ['enabled', 'site-key', 'action', 'enterprise', 'variant'];
 
-const BaseClass = createBaseClass({
+// The runtime only validates elements carrying a `name` (querySelectorAll('*[name]')).
+const DEFAULT_FIELD_NAME = 'recaptcha';
+
+const BaseInputClass = createBaseInputClass({
   componentName,
   baseSelector: ':host > div',
 });
-class RawRecaptcha extends BaseClass {
+class RawRecaptcha extends BaseInputClass {
+  /** The exact `name` this component wrote itself, or null if the name is not ours. */
+  #ownedFieldName = null;
+
   static get observedAttributes() {
-    return observedAttributes.concat(BaseClass.observedAttributes || []);
+    return observedAttributes.concat(BaseInputClass.observedAttributes || []);
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -25,6 +31,7 @@ class RawRecaptcha extends BaseClass {
       }
 
       if (attrName === 'variant') {
+        this.#syncFormField();
         this.updatePreview();
       }
     }
@@ -40,7 +47,7 @@ class RawRecaptcha extends BaseClass {
   }
 
   displayRecaptcha() {
-    if (this.isWidget) {
+    if (this.isWidgetVariant) {
       this.displayWidget();
     } else {
       this.displayDeprecated();
@@ -135,6 +142,31 @@ class RawRecaptcha extends BaseClass {
     super.init?.();
 
     observeChildren(this, this.updatePreview.bind(this));
+    // avoid any possible conflicts with the inner input element
+    this.inputElement = this.recaptchaWidgetInputEle;
+    this.recaptchaWidgetInputEle.getValidity = null;
+    this.recaptchaWidgetInputEle.checkValidity = null;
+    this.#syncFormField();
+  }
+
+  /**
+   * Only the widget variant is a form field — the others must not carry a name, or the screen
+   * would submit an always-empty value under it.
+   */
+  #syncFormField() {
+    if (this.isWidgetVariant) {
+      if (!this.getAttribute('name')) {
+        this.setAttribute('name', DEFAULT_FIELD_NAME);
+        this.#ownedFieldName = DEFAULT_FIELD_NAME;
+      }
+    } else if (this.#ownedFieldName && this.getAttribute('name') === this.#ownedFieldName) {
+      this.removeAttribute('name');
+      this.#ownedFieldName = null;
+    }
+
+    // Refreshes the mixin's cached validity, which reportValidity answers from. Non-bubbling on
+    // purpose: the flow must not read this as user input.
+    this.dispatchEvent(new Event('change'));
   }
 
   updatePreview() {
@@ -150,7 +182,7 @@ class RawRecaptcha extends BaseClass {
   }
 
   getValidity() {
-    if (!this.isWidget) {
+    if (!this.isWidgetVariant) {
       return {};
     }
 
@@ -162,7 +194,7 @@ class RawRecaptcha extends BaseClass {
   }
 
   checkValidity() {
-    if (!this.isWidget) {
+    if (!this.isWidgetVariant) {
       return true;
     }
 
@@ -189,7 +221,7 @@ class RawRecaptcha extends BaseClass {
     return this.getAttribute('variant') || 'text';
   }
 
-  get isWidget() {
+  get isWidgetVariant() {
     return this.variant === 'widget';
   }
 
@@ -203,7 +235,7 @@ class RawRecaptcha extends BaseClass {
 
   #toggleRecaptcha(enabled) {
     this.renderRecaptcha(enabled);
-    if (this.isWidget) {
+    if (this.isWidgetVariant) {
       // For the interactive widget, scripts are loaded/executed by the runtime (grecaptcha-v2 for the
       // v2 checkbox, grecaptcha for an Enterprise key). This legacy v3/invisible path must be fully
       // skipped — the runtime renders into #recaptcha-widget and fills #recaptcha-widget-input.