@descope/web-components-ui 1.0.78 → 1.0.79

package/dist/index.esm.js

@@ -902,30 +902,6 @@ const proxyInputMixin = (superclass) =>
 		}
 	};
 
-const focusMixin = (superclass) => class FocusMixinClass extends superclass {
-  // we want to block all native events, 
-  // so the input can control when to dispatch it based on its internal behavior
-  init() {
-		super.init?.();
-		
-    this.addEventListener('blur', (e) => {
-			e.isTrusted && e.stopImmediatePropagation();
-		});
-
-		this.addEventListener('focus', (e) => {
-			e.isTrusted && e.stopImmediatePropagation();
-		});
-
-		this.addEventListener('focusout', (e) => {
-			e.isTrusted && e.stopImmediatePropagation();
-		});
-
-		this.addEventListener('focusin', (e) => {
-			e.isTrusted && e.stopImmediatePropagation();
-		});
-  }
-};
-
 // this is needed because we might generate the same css vars names
 // e.g. "overlayColor" attribute in style mixin's mapping, 
 // will generate the same var as "color" attribute in portals's mapping 
@@ -1032,53 +1008,70 @@ const readOnlyMixin = (superclass) => class ReadOnlyMixinClass extends superclas
 };
 
 const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatchingMixinClass extends superclass {
-  handleFocusEventsDispatching(focusableElements = []) {
-    let blurTimerId;
-
-    // in order to simulate blur on the input
-    // we are checking if focus on one of the other elements happened immediately after blur
-    // if not, the component is no longer focused and we should dispatch blur
-    focusableElements.forEach(ele => {
-      ele?.addEventListener('blur', (e) => {
+  init() {
+    this.#blockNativeEvents();
+    this.#handleFocusEventsDispatching();
+    this.#handleInputEventDispatching();
+
+    super.init?.();
+  }
+
+  // we want to block the native (trusted) events and control when these events are being dispatched
+  #blockNativeEvents() {
+    ['blur', 'focus', 'focusin', 'focusout'].forEach(event => {
+      this.addEventListener(event, (e) => {
+        e.isTrusted && e.target === this && e.stopImmediatePropagation();
+      });
+    });
+  }
+
+  #handleFocusEventsDispatching() {
+    let timerId;
+
+    // in order to simulate blur & focusout on root input element
+    // we are checking if focus on one of the inner elements happened immediately after blur
+    // if not, the component is no longer focused and we should dispatch blur & focusout
+    this.addEventListener('focusout', (e) => {
+      if (e.isTrusted) {
         e.stopImmediatePropagation();
-        blurTimerId = setTimeout(() => {
-          blurTimerId = null;
+        timerId = setTimeout(() => {
+          timerId = null;
           createDispatchEvent.call(this, 'blur');
           createDispatchEvent.call(this, 'focusout', { bubbles: true });
         });
-      });
+      }
+    });
 
-      // in order to simulate focus on the input
-      // we are holding a blur timer id and clearing it on blur
-      // if there is a timer id, it means that there was no blur on the input, so it's still focused
-      // otherwise, it was not focused before, and we need to dispatch a focus event
-      ele?.addEventListener('focus', (e) => {
+    // in order to simulate focus & focusin on the root input element
+    // we are holding a timer id and clearing it on focusin
+    // if there is a timer id, it means that the root input is still focused
+    // otherwise, it was not focused before, and we should dispatch focus & focusin
+    this.addEventListener('focusin', (e) => {
+      if (e.isTrusted) {
         e.stopImmediatePropagation();
-        clearTimeout(blurTimerId);
-        if (!blurTimerId) {
+        clearTimeout(timerId);
+        if (!timerId) {
           createDispatchEvent.call(this, 'focus');
           createDispatchEvent.call(this, 'focusin', { bubbles: true });
         }
-      });
+      }
     });
   }
 
   // we want to block the input events from propagating in case the value of the root input wasn't change
   // this can happen if we are sanitizing characters on the internal inputs and do not want it to affect the root input element value
   // in this case, on each input event, we are comparing the root input value to the previous one, and only if it does not match, we are allowing the input event to propagate
-  handleInputEventDispatching(inputElements) {
+  #handleInputEventDispatching() {
     let previousRootComponentValue = this.value;
 
-    inputElements.forEach(input => {
-      input.addEventListener('input', (e) => {
-        // we are comparing the previous value to the new one,
-        // and if they have the same value, we are blocking the input event
-        if (previousRootComponentValue === this.value) {
-          e.stopImmediatePropagation();
-        } else {
-          previousRootComponentValue = this.value;
-        }
-      });
+    this.addEventListener('input', (e) => {
+      // we are comparing the previous value to the new one,
+      // and if they have the same value, we are blocking the input event
+      if (previousRootComponentValue === this.value) {
+        e.stopImmediatePropagation();
+      } else {
+        previousRootComponentValue = this.value;
+      }
     });
 
   }
@@ -1809,7 +1802,6 @@ overrides$4 = `
 customElements.define(componentName$a, NumberField);
 
 const createBaseInputClass = (...args) => compose(
-  focusMixin,
   inputValidationMixin,
   changeMixin,
   readOnlyMixin,
@@ -2000,9 +1992,6 @@ class PasscodeInternal extends BaseInputClass$1 {
 
 			forwardAttrs(this, input, { includeAttrs: forwardAttributes });
 		});
-
-		this.handleFocusEventsDispatching(this.inputs);
-		this.handleInputEventDispatching(this.inputs);
 	}
 
 	attributeChangedCallback(attrName, oldValue, newValue) {
@@ -4066,9 +4055,6 @@ class PhoneFieldInternal extends BaseInputClass {
 				.join('');
 			e.target.value = sanitizedInput;
 		});
-
-		this.handleFocusEventsDispatching(this.inputs);
-		this.handleInputEventDispatching(this.inputs);
 	}
 
 	attributeChangedCallback(attrName, oldValue, newValue) {