fix(input, input-number, input-text): ensure values are initialized p…

…roperly for dist and components output targets (#8997) **Related Issue:** #7014 ## Summary Moves value initialization logic to `componentWillLoad` for consistent behavior for both `dist` and `components` output targets. **Note**: no additional tests were added since our testing setup uses the `dist` output target.
Esri · Mar 26, 2024 · 9152211 · 9152211
1 parent 979e837
commit 9152211
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 33 deletions.
diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx
@@ -433,21 +433,6 @@ export class InputNumber
     connectLabel(this);
     connectForm(this);
 
-    this.setPreviousEmittedNumberValue(this.value);
-    this.setPreviousNumberValue(this.value);
-
-    this.warnAboutInvalidNumberValue(this.value);
-
-    if (this.value === "Infinity" || this.value === "-Infinity") {
-      this.displayedValue = this.value;
-      this.previousEmittedNumberValue = this.value;
-    } else {
-      this.setNumberValue({
-        origin: "connected",
-        value: isValidNumber(this.value) ? this.value : "",
-      });
-    }
-
     this.mutationObserver?.observe(this.el, { childList: true });
     this.setDisabledAction();
     this.el.addEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
@@ -474,6 +459,21 @@ export class InputNumber
     this.minString = this.min?.toString();
     this.requestedIcon = setRequestedIcon({}, this.icon, "number");
     await setUpMessages(this);
+
+    this.setPreviousEmittedNumberValue(this.value);
+    this.setPreviousNumberValue(this.value);
+
+    this.warnAboutInvalidNumberValue(this.value);
+
+    if (this.value === "Infinity" || this.value === "-Infinity") {
+      this.displayedValue = this.value;
+      this.previousEmittedNumberValue = this.value;
+    } else {
+      this.setNumberValue({
+        origin: "connected",
+        value: isValidNumber(this.value) ? this.value : "",
+      });
+    }
   }
 
   componentShouldUpdate(newValue: string, oldValue: string, property: string): boolean {

diff --git a/packages/calcite-components/src/components/input-text/input-text.tsx b/packages/calcite-components/src/components/input-text/input-text.tsx
@@ -324,8 +324,6 @@ export class InputText
     if (this.inlineEditableEl) {
       this.editingEnabled = this.inlineEditableEl.editingEnabled || false;
     }
-    this.setPreviousEmittedValue(this.value);
-    this.setPreviousValue(this.value);
 
     connectLabel(this);
     connectForm(this);
@@ -349,6 +347,9 @@ export class InputText
     setUpLoadableComponent(this);
     this.requestedIcon = setRequestedIcon({}, this.icon, "text");
     await setUpMessages(this);
+
+    this.setPreviousEmittedValue(this.value);
+    this.setPreviousValue(this.value);
   }
 
   componentDidLoad(): void {

diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx
@@ -487,22 +487,6 @@ export class Input
     connectLabel(this);
     connectForm(this);
 
-    this.setPreviousEmittedValue(this.value);
-    this.setPreviousValue(this.value);
-
-    if (this.type === "number") {
-      if (this.value === "Infinity" || this.value === "-Infinity") {
-        this.displayedValue = this.value;
-        this.previousEmittedValue = this.value;
-      } else {
-        this.warnAboutInvalidNumberValue(this.value);
-        this.setValue({
-          origin: "connected",
-          value: isValidNumber(this.value) ? this.value : "",
-        });
-      }
-    }
-
     this.mutationObserver?.observe(this.el, { childList: true });
 
     this.setDisabledAction();
@@ -527,6 +511,22 @@ export class Input
     this.minString = this.min?.toString();
     this.requestedIcon = setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
     await setUpMessages(this);
+
+    this.setPreviousEmittedValue(this.value);
+    this.setPreviousValue(this.value);
+
+    if (this.type === "number") {
+      if (this.value === "Infinity" || this.value === "-Infinity") {
+        this.displayedValue = this.value;
+        this.previousEmittedValue = this.value;
+      } else {
+        this.warnAboutInvalidNumberValue(this.value);
+        this.setValue({
+          origin: "connected",
+          value: isValidNumber(this.value) ? this.value : "",
+        });
+      }
+    }
   }
 
   componentDidLoad(): void {