diff --git a/.changeset/tasty-cups-argue.md b/.changeset/tasty-cups-argue.md
new file mode 100644
index 00000000000..0dee645f480
--- /dev/null
+++ b/.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.
diff --git a/packages/core/scss/mixins/_input.scss b/packages/core/scss/mixins/_input.scss
index d480fc98a9e..5a57e46f028 100644
--- a/packages/core/scss/mixins/_input.scss
+++ b/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));
}
diff --git a/packages/core/src/components/input/input.fc.tsx b/packages/core/src/components/input/input.fc.tsx
index f5fe83d778f..410cb6ccd76 100644
--- a/packages/core/src/components/input/input.fc.tsx
+++ b/packages/core/src/components/input/input.fc.tsx
@@ -57,7 +57,6 @@ export function TextareaElement(
style={{
resize: props.resizeBehavior,
height: props.textareaHeight,
- width: props.textareaWidth,
}}
{...props.ariaAttributes}
>
diff --git a/packages/core/src/components/input/tests/form-ready.ct.ts b/packages/core/src/components/input/tests/form-ready.ct.ts
index ebdfcf58097..fd99e1616e9 100644
--- a/packages/core/src/components/input/tests/form-ready.ct.ts
+++ b/packages/core/src/components/input/tests/form-ready.ct.ts
@@ -309,6 +309,39 @@ regressionTest(
}
);
+regressionTest(
+ 'form-ready - use of textareaWidth and textareaRows properties',
+ async ({ mount, page }) => {
+ await mount(
+ `
`
+ );
+
+ 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(
+ ``
+ );
+
+ 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');
+ }
+);
+
regressionTest(
`form-ready - ix-number-input without allowEmptyValueChange emits 0 on clear`,
async ({ mount, page }) => {
diff --git a/packages/core/src/components/input/textarea.scss b/packages/core/src/components/input/textarea.scss
index b88f1399252..18971e5e97d 100644
--- a/packages/core/src/components/input/textarea.scss
+++ b/packages/core/src/components/input/textarea.scss
@@ -58,3 +58,22 @@
border-color: var(--theme-input--border-color--invalid--active) !important;
}
}
+
+:host {
+ textarea:not([rows]) {
+ height: 3.25rem;
+ }
+}
+:host([textarea-width]:not(.manually-resized)) {
+ display: inline-block;
+ width: var(--textarea-width);
+}
+
+.input-wrapper {
+ width: 100%;
+}
+
+textarea {
+ width: 100%;
+ box-sizing: border-box;
+}
diff --git a/packages/core/src/components/input/textarea.tsx b/packages/core/src/components/input/textarea.tsx
index 0a120966fc5..76f1f843b03 100644
--- a/packages/core/src/components/input/textarea.tsx
+++ b/packages/core/src/components/input/textarea.tsx
@@ -187,6 +187,7 @@ export class Textarea implements IxInputFieldComponent {
this.manualHeight = undefined;
this.manualWidth = undefined;
this.isProgrammaticResize = true;
+ this.hostElement.classList.remove('manually-resized');
}
@Watch('resizeBehavior')
@@ -196,6 +197,7 @@ export class Textarea implements IxInputFieldComponent {
componentWillLoad() {
this.updateFormInternalValue(this.value);
+ this.setTextareaWidth();
}
disconnectedCallback() {
@@ -229,6 +231,7 @@ export class Textarea implements IxInputFieldComponent {
this.isManuallyResized = true;
this.manualHeight = textarea.style.height;
this.manualWidth = textarea.style.width;
+ this.hostElement.classList.add('manually-resized');
});
this.resizeObserver.observe(textarea);
@@ -239,6 +242,19 @@ export class Textarea implements IxInputFieldComponent {
this.value = value;
}
+ private setTextareaWidth() {
+ if (this.textareaWidth) {
+ this.hostElement.style.setProperty(
+ '--textarea-width',
+ this.textareaWidth
+ );
+ this.hostElement.setAttribute('textarea-width', '');
+ } else {
+ this.hostElement.style.removeProperty('--textarea-width');
+ this.hostElement.removeAttribute('textarea-width');
+ }
+ }
+
/** @internal */
@Method()
async getAssociatedFormElement(): Promise {
diff --git a/testing/visual-testing/__screenshots__/tests/3rd-party/bootstrap/bootstrap.e2e.ts/3rd-party-bootstrap-html-elements-1-chromium---classic-dark-linux.png b/testing/visual-testing/__screenshots__/tests/3rd-party/bootstrap/bootstrap.e2e.ts/3rd-party-bootstrap-html-elements-1-chromium---classic-dark-linux.png
index b33d9d595ec..a21a39ba320 100644
Binary files a/testing/visual-testing/__screenshots__/tests/3rd-party/bootstrap/bootstrap.e2e.ts/3rd-party-bootstrap-html-elements-1-chromium---classic-dark-linux.png and b/testing/visual-testing/__screenshots__/tests/3rd-party/bootstrap/bootstrap.e2e.ts/3rd-party-bootstrap-html-elements-1-chromium---classic-dark-linux.png differ
diff --git a/testing/visual-testing/__screenshots__/tests/3rd-party/bootstrap/bootstrap.e2e.ts/3rd-party-bootstrap-html-elements-1-chromium---classic-light-linux.png b/testing/visual-testing/__screenshots__/tests/3rd-party/bootstrap/bootstrap.e2e.ts/3rd-party-bootstrap-html-elements-1-chromium---classic-light-linux.png
index d3919b16141..13cadc80414 100644
Binary files a/testing/visual-testing/__screenshots__/tests/3rd-party/bootstrap/bootstrap.e2e.ts/3rd-party-bootstrap-html-elements-1-chromium---classic-light-linux.png and b/testing/visual-testing/__screenshots__/tests/3rd-party/bootstrap/bootstrap.e2e.ts/3rd-party-bootstrap-html-elements-1-chromium---classic-light-linux.png differ
diff --git a/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-disabled-1-chromium---classic-dark-linux.png b/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-disabled-1-chromium---classic-dark-linux.png
index 3db122d13e5..692e3410f68 100644
Binary files a/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-disabled-1-chromium---classic-dark-linux.png and b/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-disabled-1-chromium---classic-dark-linux.png differ
diff --git a/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-disabled-1-chromium---classic-light-linux.png b/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-disabled-1-chromium---classic-light-linux.png
index 81fefbfa6ec..fda05872747 100644
Binary files a/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-disabled-1-chromium---classic-light-linux.png and b/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-disabled-1-chromium---classic-light-linux.png differ
diff --git a/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-readonly-1-chromium---classic-dark-linux.png b/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-readonly-1-chromium---classic-dark-linux.png
index 2572f224063..7a8f8aef985 100644
Binary files a/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-readonly-1-chromium---classic-dark-linux.png and b/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-readonly-1-chromium---classic-dark-linux.png differ
diff --git a/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-readonly-1-chromium---classic-light-linux.png b/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-readonly-1-chromium---classic-light-linux.png
index 94d43a06600..287f09083c1 100644
Binary files a/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-readonly-1-chromium---classic-light-linux.png and b/testing/visual-testing/__screenshots__/tests/textarea/textarea.e2e.ts/textarea-readonly-1-chromium---classic-light-linux.png differ