Merge pull request #2990 from dn55533/fix/2813-setting-an-ictextfield…

…-value-to-undefined-throws-an-error-in-the-console 2813 Allow the IcTextField to be able to handle null or undefined values
mi6 · Jan 9, 2025 · c4c58fc · c4c58fc
2 parents 0b43b38 + 146092d
commit c4c58fc
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 3 deletions.
diff --git a/packages/react/src/stories/ic-text-field.stories.mdx b/packages/react/src/stories/ic-text-field.stories.mdx
@@ -141,6 +141,58 @@ export const ControlledExample = () => {
   </Story>
 </Canvas>
 
+### With null value
+
+<Canvas>
+  <Story name="With null value">
+    <IcTextField
+      value={null}
+      label="What is your favourite coffee?"
+      required
+      placeholder="Placeholder"
+      helperText="Such as Arabica, Robusta or Liberica"
+    >
+      <SlottedIcon />
+    </IcTextField>
+    <IcTextField
+      rows="6"
+      value={null}
+      label="What is your favourite coffee?"
+      required
+      placeholder="Placeholder"
+      helperText="Such as Arabica, Robusta or Liberica"
+    >
+      <SlottedIcon />
+    </IcTextField>
+  </Story>
+</Canvas>
+
+### With undefined value
+
+<Canvas>
+  <Story name="With undefined value">
+    <IcTextField
+      value={undefined}
+      label="What is your favourite coffee?"
+      required
+      placeholder="Placeholder"
+      helperText="Such as Arabica, Robusta or Liberica"
+    >
+      <SlottedIcon />
+    </IcTextField>
+    <IcTextField
+      rows="6"
+      value={undefined}
+      label="What is your favourite coffee?"
+      required
+      placeholder="Placeholder"
+      helperText="Such as Arabica, Robusta or Liberica"
+    >
+      <SlottedIcon />
+    </IcTextField>
+  </Story>
+</Canvas>
+
 ### Max length
 
 <Canvas>

diff --git a/packages/web-components/src/components/ic-text-field/ic-text-field.tsx b/packages/web-components/src/components/ic-text-field/ic-text-field.tsx
@@ -390,8 +390,11 @@ export class TextField {
     this.inputEl?.focus();
   }
 
+  private getNumberOfCharacters = (value: string) =>
+    value !== null && value !== undefined ? value.length : 0;
+
   private getMaxLengthExceeded = (value: string) => {
-    this.numChars = value.length;
+    this.numChars = this.getNumberOfCharacters(value);
 
     if (this.type === "number") {
       this.minValueUnattained = value && Number(value) < Number(this.min);
@@ -404,7 +407,8 @@ export class TextField {
   };
 
   private getMaxCharactersReached = (value: string) => {
-    this.numChars = value.length;
+    this.numChars = this.getNumberOfCharacters(value);
+
     this.maxCharactersReached =
       this.maxCharacters > 0 ? this.numChars >= this.maxCharacters : false;
 
@@ -601,7 +605,7 @@ export class TextField {
               <span
                 class={{
                   ["readonly"]: readonly,
-                  ["has-value"]: value.length > 0,
+                  ["has-value"]: this.getNumberOfCharacters(value) > 0,
                 }}
                 slot="left-icon"
               >