fix(date-time input): Label in Material with read-only (#1182)

CHANGELOG.md

@@ -15,6 +15,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Dropdown `positionStrategy` property. The dropdown now uses the Popover API to render its container in the top layer of the browser viewport,
   making the property obsolete.
 
+### Fixed
+- Date-time input - Label in Material theme is broken when component is in read-only mode [#1166](https://github.com/IgniteUI/igniteui-webcomponents/issues/1166)
+
 ## [4.8.2] - 2024-04-15
 ### Fixed
 - Textarea - resize handle position for non-suffixed textarea [#1094](https://github.com/IgniteUI/igniteui-webcomponents/issues/1094)

src/components/date-time-input/date-time-input.ts

@@ -554,8 +554,9 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
       '0'
     );
 
-    this._mask =
-      newMask.indexOf('tt') !== -1 ? newMask.replace(/tt/g, 'LL') : newMask;
+    this._mask = newMask.includes('tt')
+      ? newMask.replace(/tt/g, 'LL')
+      : newMask;
 
     this.parser.mask = this._mask;
     this.parser.prompt = this.prompt;
@@ -566,15 +567,9 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
   }
 
   private parseDate(val: string) {
-    if (!val) {
-      return null;
-    }
-
-    return DateTimeUtil.parseValueFromMask(
-      val,
-      this._inputDateParts,
-      this.prompt
-    );
+    return val
+      ? DateTimeUtil.parseValueFromMask(val, this._inputDateParts, this.prompt)
+      : null;
   }
 
   private getMaskedValue(): string {
@@ -606,17 +601,13 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
   }
 
   private isComplete(): boolean {
-    return this.maskedValue.indexOf(this.prompt) === -1;
+    return !this.maskedValue.includes(this.prompt);
   }
 
   private updateValue(): void {
     if (this.isComplete()) {
       const parsedDate = this.parseDate(this.maskedValue);
-      if (DateTimeUtil.isValidDate(parsedDate)) {
-        this.value = parsedDate;
-      } else {
-        this.value = null;
-      }
+      this.value = DateTimeUtil.isValidDate(parsedDate) ? parsedDate : null;
     } else {
       this.value = null;
     }
@@ -627,29 +618,25 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
   }
 
   private getNewPosition(value: string, direction = 0): number {
-    const literals = this._inputDateParts.filter(
-      (p) => p.type === DateParts.Literal
-    );
-    let cursorPos = this.selection.start;
+    const cursorPos = this.selection.start;
 
     if (!direction) {
-      do {
-        cursorPos = cursorPos > 0 ? --cursorPos : cursorPos;
-      } while (!literals.some((l) => l.end === cursorPos) && cursorPos > 0);
-      return cursorPos;
+      // Last literal before the current cursor position or start of input value
+      const part = this._inputDateParts.findLast(
+        (part) => part.type === DateParts.Literal && part.end < cursorPos
+      );
+      return part?.end ?? 0;
     }
-    do {
-      cursorPos++;
-    } while (
-      !literals.some((l) => l.start === cursorPos) &&
-      cursorPos < value.length
+
+    // First literal after the current cursor position or end of input value
+    const part = this._inputDateParts.find(
+      (part) => part.type === DateParts.Literal && part.start > cursorPos
     );
-    return cursorPos;
+    return part?.start ?? value.length;
   }
 
   protected override async handleFocus() {
     this.focused = true;
-    this.updateMask();
     super.handleFocus();
 
     if (this.readOnly) {

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es2021",
     "module": "es2020",
-    "lib": ["es2022", "DOM", "DOM.Iterable"],
+    "lib": ["es2023", "DOM", "DOM.Iterable"],
     "outDir": "dist",
     "rootDir": "./",
     "declaration": true,