@descope/web-components-ui 1.104.0 → 1.105.0

package/src/components/descope-date-field/DateFieldClass.js

@@ -17,7 +17,14 @@ import {
 } from './helpers';
 import { formats } from './formats';
 import { calendarIcon } from './icons';
-import { counterConfig, DEFAULT_FORMAT, DIVIDER, NATIVE_FORMAT, valRange } from './consts';
+import {
+  counterConfig,
+  DEFAULT_FORMAT,
+  DIVIDER,
+  MOBILE_DEVICE_INTERACTION_TIMEOUT_MS,
+  NATIVE_FORMAT,
+  valRange,
+} from './consts';
 import { DateCounter } from './DateCounterClass';
 import { TextFieldClass } from '../descope-text-field/TextFieldClass';
 import { injectStyle } from '@descope-ui/common/components-helpers';
@@ -40,8 +47,6 @@ class RawDateFieldClass extends BaseInputClass {
 
   selectedCounterIdx = 0;
 
-  #focused = false;
-
   updateCountersDisplay() {
     this.inputElement.value = this.countersValue;
   }
@@ -251,22 +256,7 @@ class RawDateFieldClass extends BaseInputClass {
     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(this, this.inputElement, {
       includeAttrs: [
@@ -464,16 +454,19 @@ class RawDateFieldClass extends BaseInputClass {
     });
   }
 
+  // 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() {
@@ -481,18 +474,12 @@ class RawDateFieldClass extends BaseInputClass {
       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;
     }
@@ -522,6 +509,8 @@ class RawDateFieldClass extends BaseInputClass {
       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();
   }
 
@@ -537,7 +526,11 @@ class RawDateFieldClass extends BaseInputClass {
 
   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
     );
   }
 
@@ -563,14 +556,18 @@ class RawDateFieldClass extends BaseInputClass {
       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() {
@@ -607,9 +604,7 @@ class RawDateFieldClass extends BaseInputClass {
       this.selectPrevCounter();
     }
 
-    setTimeout(() => {
-      this.setInputSelectionRange();
-    });
+    this.setInputSelectionRange();
   }
 
   handleNavKeys(e) {
@@ -631,27 +626,32 @@ class RawDateFieldClass extends BaseInputClass {
   }
 
   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) {

package/src/components/descope-date-field/consts.js

@@ -46,3 +46,5 @@ export const valRange = {
 export const BUTTON_LABEL_DONE = 'Done';
 export const BUTTON_LABEL_CANCEL = 'Cancel';
 export const CALENDAR_LABEL_TODAY = 'Today';
+
+export const MOBILE_DEVICE_INTERACTION_TIMEOUT_MS = 150;