@descope/web-components-ui 1.104.0 → 1.105.0

package/dist/cjs/index.cjs.js

@@ -15869,6 +15869,8 @@ const BUTTON_LABEL_DONE = 'Done';
 const BUTTON_LABEL_CANCEL = 'Cancel';
 const CALENDAR_LABEL_TODAY = 'Today';
 
+const MOBILE_DEVICE_INTERACTION_TIMEOUT_MS = 150;
+
 const isValidAttrArr = (arr, count) =>
   Array.isArray(arr) && arr.length === count && arr.filter(Boolean).length === count;
 
@@ -16953,8 +16955,6 @@ class RawDateFieldClass extends BaseInputClass$1 {
 
   selectedCounterIdx = 0;
 
-  #focused = false;
-
   updateCountersDisplay() {
     this.inputElement.value = this.countersValue;
   }
@@ -17164,22 +17164,7 @@ class RawDateFieldClass extends BaseInputClass$1 {
     this.inputElement.addEventListener('click', this.handleMouseCaretPositionChange.bind(this));
     this.inputElement.addEventListener('keydown', this.handleArrowKeys.bind(this));
     this.inputElement.addEventListener('beforeinput', this.handleInput.bind(this));
-
-    // We want to handle touch events the same way we handle `click` events.
-    // Since we can't seem to block touch events (`touch-action: none` or preventing default on `touchstart`
-    // or `touchend`, we listen to `pointerdown` and in case it's of type `touch` we execute
-    // the component's logic for range selection.
-    this.inputElement.addEventListener('pointerdown', (e) => {
-      if (e.pointerType === 'touch') {
-        e.preventDefault();
-        if (!this.#focused) {
-          this.inputElement.focus();
-        }
-        setTimeout(() => {
-          this.handleMouseCaretPositionChange(e);
-        }, 250);
-      }
-    });
+    this.inputElement.addEventListener('pointerdown', this.onPointerDown.bind(this));
 
     forwardAttrs$1(this, this.inputElement, {
       includeAttrs: [
@@ -17377,16 +17362,19 @@ class RawDateFieldClass extends BaseInputClass$1 {
     });
   }
 
+  // In mobile devices, there are cases were `pointerdown` is triggered
+  // instead of `click`.
+  onPointerDown(e) {
+    setTimeout(() => this.handleMouseCaretPositionChange(e), MOBILE_DEVICE_INTERACTION_TIMEOUT_MS);
+  }
+
   onFocus() {
-    if (this.isReadOnly || this.#focused) {
+    if (this.isReadOnly) {
       return;
     }
 
-    // We use this flag to support mobile logic, which calls `focus` on touch event, we want to make sure
-    // focus executes it logic only when needed.
-    this.#focused = true;
-
-    this.resetDisplay();
+    // We need to wait for focus to end before we set selection
+    setTimeout(() => this.resetDisplay());
   }
 
   resetDisplay() {
@@ -17394,18 +17382,12 @@ class RawDateFieldClass extends BaseInputClass$1 {
       this.inputElement.value = this.format;
     }
 
-    // On focus select the first part of the format placeholder
+    // On focus select the first counter
     this.selectedCounterIdx = 0;
-
-    setTimeout(() => {
-      // set selection on first counter
-      this.inputElement.setSelectionRange(0, this.sortedCounters[0].length);
-    });
+    this.inputElement.setSelectionRange(0, this.sortedCounters[0].length);
   }
 
   onBlur() {
-    this.#focused = false;
-
     if (this.opened) {
       return;
     }
@@ -17435,6 +17417,8 @@ class RawDateFieldClass extends BaseInputClass$1 {
       this.selectNextCounter();
     }
 
+    // We wait for the digit to be parsed, and only then set the selection.
+    // Failing to do so results in unexpected "jump" of the screen in mobile devices.
     this.setInputSelectionRange();
   }
 
@@ -17450,7 +17434,11 @@ class RawDateFieldClass extends BaseInputClass$1 {
 
   setSelectedCounterByCaretPosition(e) {
     this.selectedCounterIdx = this.getCounterIdx(
-      e.target.selectionStart || this.inputElement.selectionStart
+      // if triggered by touch event, target might not include `selectionStart`
+      // in that case we fall back to the inputElement's `selectionStart` value.
+      // Therefore, it is recommended to run this function with setTimeout,
+      // at least for mobile events.
+      e.target?.selectionStart || this.inputElement.selectionStart
     );
   }
 
@@ -17476,14 +17464,18 @@ class RawDateFieldClass extends BaseInputClass$1 {
       return;
     }
 
-    const caretStart = this.sortedCounters
-      .slice(0, this.selectedCounterIdx)
-      .reduce((acc, counter) => acc + counter.length, this.selectedCounterIdx);
+    // We wait for before setting the selection, otherwise there's an
+    // unexpected "jump" of the screen in mobile devices.
+    setTimeout(() => {
+      const caretStart = this.sortedCounters
+        .slice(0, this.selectedCounterIdx)
+        .reduce((acc, counter) => acc + counter.length, this.selectedCounterIdx);
 
-    this.inputElement.setSelectionRange(
-      caretStart,
-      caretStart + this.sortedCounters[this.selectedCounterIdx].length
-    );
+      this.inputElement.setSelectionRange(
+        caretStart,
+        caretStart + this.sortedCounters[this.selectedCounterIdx].length
+      );
+    });
   }
 
   resetDateCounters() {
@@ -17518,9 +17510,7 @@ class RawDateFieldClass extends BaseInputClass$1 {
       this.selectPrevCounter();
     }
 
-    setTimeout(() => {
-      this.setInputSelectionRange();
-    });
+    this.setInputSelectionRange();
   }
 
   handleNavKeys(e) {
@@ -17542,27 +17532,32 @@ class RawDateFieldClass extends BaseInputClass$1 {
   }
 
   handleBackspace() {
-    if (this.activeCounter.isEmpty) {
-      this.activeCounter.clear();
+    const counter = this.activeCounter;
+
+    if (counter.isEmpty) {
       this.selectPrevCounter();
       this.setInputSelectionRange();
     } else {
-      this.activeCounter.del();
+      counter.set('');
     }
+
+    // To support keyboards like SwiftKey, we need to re-render the counters display and selection,
+    // otherwise we get an unexpected behavior, where the format is deleted.
+    setTimeout(() => {
+      this.updateCountersDisplay();
+      this.setInputSelectionRange();
+    });
   }
 
   handleMouseCaretPositionChange(e) {
     if (this.opened) {
       return;
     }
+
     e.preventDefault();
-    this.setSelectedCounterByCaretPosition(e);
 
-    // On keydown - in desktop mode - selection is sometimes not set, and instead there is a cursor.
-    // We need to wait until we can set selection range.
-    setTimeout(() => {
-      this.setInputSelectionRange();
-    });
+    this.setSelectedCounterByCaretPosition(e);
+    this.setInputSelectionRange();
   }
 
   onInitialValueChange(val) {