@descope/web-components-ui 1.99.0 → 1.100.0

package/dist/cjs/index.cjs.js

@@ -16815,6 +16815,8 @@ class RawDateFieldClass extends BaseInputClass$1 {
 
   selectedCounterIdx = 0;
 
+  #focused = false;
+
   updateCountersDisplay() {
     this.inputElement.value = this.countersValue;
   }
@@ -17025,6 +17027,22 @@ class RawDateFieldClass extends BaseInputClass$1 {
     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);
+      }
+    });
+
     forwardAttrs$1(this, this.inputElement, {
       includeAttrs: [
         'label',
@@ -17222,20 +17240,34 @@ class RawDateFieldClass extends BaseInputClass$1 {
   }
 
   onFocus() {
-    if (this.isReadOnly) {
+    if (this.isReadOnly || this.#focused) {
       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();
+  }
+
+  resetDisplay() {
     if (!this.inputElement.value) {
       this.inputElement.value = this.format;
     }
 
     // On focus select the first part of the format placeholder
     this.selectedCounterIdx = 0;
-    this.setInputSelectionRange();
+
+    setTimeout(() => {
+      // set selection on first counter
+      this.inputElement.setSelectionRange(0, this.sortedCounters[0].length);
+    });
   }
 
   onBlur() {
+    this.#focused = false;
+
     if (this.opened) {
       return;
     }
@@ -17279,7 +17311,9 @@ class RawDateFieldClass extends BaseInputClass$1 {
   }
 
   setSelectedCounterByCaretPosition(e) {
-    this.selectedCounterIdx = this.getCounterIdx(e.target.selectionStart);
+    this.selectedCounterIdx = this.getCounterIdx(
+      e.target.selectionStart || this.inputElement.selectionStart
+    );
   }
 
   selectNextCounter() {
@@ -17385,7 +17419,12 @@ class RawDateFieldClass extends BaseInputClass$1 {
     }
     e.preventDefault();
     this.setSelectedCounterByCaretPosition(e);
-    this.setInputSelectionRange();
+
+    // 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();
+    });
   }
 
   onInitialValueChange(val) {