Added fix for properties textarea-rows and textarea-width issues

.changeset/tasty-cups-argue.md

@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+Fix **ix-textarea** properties textarea-rows and textarea-width making sure their values get applied.

packages/core/scss/mixins/_input.scss

@@ -120,7 +120,6 @@
 @mixin element-textarea {
   & {
     min-height: 2rem;
-    height: 3.25rem;
     padding: calc(0.375rem - var(--theme-input--border-thickness))
       calc(0.5rem - var(--theme-input--border-thickness));
   }

packages/core/src/components/input/input.fc.tsx

@@ -56,7 +56,6 @@ export function TextareaElement(
       style={{
         resize: props.resizeBehavior,
         height: props.textareaHeight,
-        width: props.textareaWidth,
       }}
       {...props.ariaAttributes}
     ></textarea>

packages/core/src/components/input/tests/form-ready.ct.ts

@@ -150,3 +150,36 @@ regressionTest(
     await expect(counter).toHaveText('1/20');
   }
 );
+
+regressionTest(
+  'form-ready - use of textareaWidth and textareaRows properties',
+  async ({ mount, page }) => {
+    await mount(
+      `<form><ix-textarea name="my-field-name" textarea-width="50%" textarea-rows="5"></ix-textarea></form>`
+    );
+
+    const formElement = page.locator('form');
+    preventFormSubmission(formElement);
+    const textarea = page.locator('ix-textarea').locator('textarea');
+    await expect(textarea).toHaveCSS('--textarea-width', '50%');
+    await expect(textarea).toHaveAttribute('rows', '5');
+  }
+);
+
+regressionTest(
+  'form-ready - height at 3.25rem if no textarearows is used',
+  async ({ mount, page }) => {
+    await mount(
+      `<form><ix-textarea name="my-field-name"></ix-textarea></form>`
+    );
+
+    const formElement = page.locator('form');
+    preventFormSubmission(formElement);
+    const textarea = page.locator('ix-textarea').locator('textarea');
+    await expect(textarea).not.toHaveAttribute('rows');
+    const computedStyle = await textarea.evaluate((el) => {
+      return window.getComputedStyle(el).height;
+    });
+    expect(computedStyle).toBe('52px');
+  }
+);

packages/core/src/components/input/textarea.scss

@@ -58,3 +58,21 @@
     border-color: var(--theme-input--border-color--invalid--active) !important;
   }
 }
+
+:host {
+  textarea:not([rows]) {
+    height: 3.25rem;
+  }
+}
+:host([textarea-width]) {
+  display: block;
+  width: var(--textarea-width);
+}
+
+.input-wrapper {
+  width: 100%;
+}
+
+textarea {
+  width: 100%;
+}

packages/core/src/components/input/textarea.tsx

@@ -196,6 +196,7 @@ export class Textarea implements IxInputFieldComponent<string> {
 
   componentWillLoad() {
     this.updateFormInternalValue(this.value);
+    this.setTextareaWidth();
   }
 
   disconnectedCallback() {
@@ -239,6 +240,16 @@ export class Textarea implements IxInputFieldComponent<string> {
     this.value = value;
   }
 
+  private setTextareaWidth() {
+    if (this.textareaWidth) {
+      this.hostElement.style.setProperty(
+        '--textarea-width',
+        this.textareaWidth
+      );
+      this.hostElement.setAttribute('textarea-width', '');
+    }
+  }
+
   /** @internal */
   @Method()
   async getAssociatedFormElement(): Promise<HTMLFormElement | null> {