Merge pull request #2993 from mi6/v3-cherry-pick-textfield

V3 cherry pick textfield
mi6 · Jan 9, 2025 · 35e6c24 · 35e6c24
2 parents d12d44c + 54de113
commit 35e6c24
Show file tree

Hide file tree

Showing 2 changed files with 61 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
@@ -149,6 +149,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>
+
 ### Full width
 
 <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
@@ -404,19 +404,25 @@ export class TextField {
    */
 
   @Method()
-  setFocus() {
+  async setFocus() {
     this.inputEl?.focus();
   }
 
+  private getNumberOfCharacters = (value: string) =>
+    value !== null && value !== undefined ? value.length : 0;
+
   private getMaxValueExceeded = (value: string) => {
+    this.numChars = this.getNumberOfCharacters(value);
+
     if (this.type === "number") {
       this.minValueUnattained = value && Number(value) < Number(this.min);
       this.maxValueExceeded = Number(value) > Number(this.max);
     }
   };
 
   private getMaxCharactersReached = (value: string) => {
-    this.numChars = value.length;
+    this.numChars = this.getNumberOfCharacters(value);
+
     this.maxCharactersReached =
       this.maxCharacters > 0 ? this.numChars >= this.maxCharacters : false;
 
@@ -602,7 +608,7 @@ export class TextField {
               <span
                 class={{
                   readonly,
-                  "has-value": value.length > 0,
+                  "has-value": this.getNumberOfCharacters(value) > 0,
                 }}
                 slot="left-icon"
               >