diff --git a/packages/core/scss/components/_forms.scss b/packages/core/scss/components/_forms.scss index cc20a2ae130..6e741f55908 100755 --- a/packages/core/scss/components/_forms.scss +++ b/packages/core/scss/components/_forms.scss @@ -78,6 +78,11 @@ box-shadow: none !important; outline: none !important; border-color: var(--theme-input--border-color); + cursor: default !important; + + &::placeholder { + color: transparent; + } } .form-control:disabled, diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx index 0c7b366aded..25d82edc6ba 100644 --- a/packages/core/src/components/select/select.tsx +++ b/packages/core/src/components/select/select.tsx @@ -353,6 +353,18 @@ export class Select { this.dropdownShow = false; } + private placeholderValue() { + if (this.editable) { + return this.i18nPlaceholderEditable; + } + + if (this.readonly) { + return ''; + } + + return this.i18nPlaceholder; + } + render() { return ( @@ -396,11 +408,7 @@ export class Select { class={{ 'allow-clear': this.allowClear && !!this.value?.length, }} - placeholder={ - this.editable - ? this.i18nPlaceholderEditable - : this.i18nPlaceholder - } + placeholder={this.placeholderValue()} value={this.inputValue} ref={(ref) => (this.inputRef = ref)} onInput={() => this.filterItemsWithTypeahead()} diff --git a/packages/core/src/tests/input/input.e2e.ts b/packages/core/src/tests/input/input.e2e.ts index c7d44b142e3..b86c5a1387f 100644 --- a/packages/core/src/tests/input/input.e2e.ts +++ b/packages/core/src/tests/input/input.e2e.ts @@ -42,4 +42,9 @@ regressionTest.describe('input', () => { await page.waitForTimeout(1000); expect(await page.screenshot()).toMatchSnapshot(); }); + + regressionTest('readonly', async ({ page }) => { + await page.goto('input/readonly'); + expect(await page.screenshot()).toMatchSnapshot(); + }); }); diff --git a/packages/core/src/tests/input/input.e2e.ts-snapshots/input-readonly-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/input/input.e2e.ts-snapshots/input-readonly-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 00000000000..fe16894daed Binary files /dev/null and b/packages/core/src/tests/input/input.e2e.ts-snapshots/input-readonly-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/input/input.e2e.ts-snapshots/input-readonly-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/input/input.e2e.ts-snapshots/input-readonly-1-chromium---theme-classic-light-linux.png new file mode 100644 index 00000000000..26719ee9dcd Binary files /dev/null and b/packages/core/src/tests/input/input.e2e.ts-snapshots/input-readonly-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/input/readonly/index.html b/packages/core/src/tests/input/readonly/index.html new file mode 100644 index 00000000000..6951eb955a9 --- /dev/null +++ b/packages/core/src/tests/input/readonly/index.html @@ -0,0 +1,22 @@ + + + + + + + + Stencil Component Starter + + + +
+ +
+ + + + \ No newline at end of file diff --git a/packages/core/src/tests/select/readonly/index.html b/packages/core/src/tests/select/readonly/index.html new file mode 100644 index 00000000000..cad9b37838e --- /dev/null +++ b/packages/core/src/tests/select/readonly/index.html @@ -0,0 +1,25 @@ + + + + + + + + Stencil Component Starter + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/core/src/tests/select/select.e2e.ts b/packages/core/src/tests/select/select.e2e.ts index a9c7bc06862..3d241b3c8c1 100644 --- a/packages/core/src/tests/select/select.e2e.ts +++ b/packages/core/src/tests/select/select.e2e.ts @@ -95,4 +95,9 @@ regressionTest.describe('select', () => { await page.waitForSelector('.dropdown-menu.show'); expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); }); + + regressionTest('readonly', async ({ page }) => { + await page.goto('select/readonly'); + expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); + }); }); diff --git a/packages/core/src/tests/select/select.e2e.ts-snapshots/select-readonly-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/select/select.e2e.ts-snapshots/select-readonly-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 00000000000..a3d7e1ea7ec Binary files /dev/null and b/packages/core/src/tests/select/select.e2e.ts-snapshots/select-readonly-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/select/select.e2e.ts-snapshots/select-readonly-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/select/select.e2e.ts-snapshots/select-readonly-1-chromium---theme-classic-light-linux.png new file mode 100644 index 00000000000..0f33570c62f Binary files /dev/null and b/packages/core/src/tests/select/select.e2e.ts-snapshots/select-readonly-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/textarea/basic/index.html b/packages/core/src/tests/textarea/basic/index.html new file mode 100644 index 00000000000..e8c79b472f5 --- /dev/null +++ b/packages/core/src/tests/textarea/basic/index.html @@ -0,0 +1,22 @@ + + + + + + + + Stencil Component Starter + + + +
+ +
+ + + + \ No newline at end of file diff --git a/packages/core/src/tests/textarea/readonly/index.html b/packages/core/src/tests/textarea/readonly/index.html new file mode 100644 index 00000000000..a36f258481a --- /dev/null +++ b/packages/core/src/tests/textarea/readonly/index.html @@ -0,0 +1,22 @@ + + + + + + + + Stencil Component Starter + + + +
+ +
+ + + + \ No newline at end of file diff --git a/packages/core/src/tests/textarea/textarea.e2e.ts b/packages/core/src/tests/textarea/textarea.e2e.ts new file mode 100644 index 00000000000..2766e3d35ea --- /dev/null +++ b/packages/core/src/tests/textarea/textarea.e2e.ts @@ -0,0 +1,23 @@ +/* + * SPDX-FileCopyrightText: 2023 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { expect } from '@playwright/test'; +import { regressionTest } from '@utils/test'; + +regressionTest.describe('textarea', () => { + regressionTest('basic', async ({ page }) => { + await page.goto('textarea/basic'); + expect(await page.screenshot()).toMatchSnapshot(); + }); + + regressionTest('readonly', async ({ page }) => { + await page.goto('textarea/readonly'); + expect(await page.screenshot()).toMatchSnapshot(); + }); +}); diff --git a/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-basic-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 00000000000..20f4e8f8962 Binary files /dev/null and b/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-basic-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-basic-1-chromium---theme-classic-light-linux.png new file mode 100644 index 00000000000..a8f49d40f12 Binary files /dev/null and b/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-basic-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-readonly-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-readonly-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 00000000000..9a06156d673 Binary files /dev/null and b/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-readonly-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-readonly-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-readonly-1-chromium---theme-classic-light-linux.png new file mode 100644 index 00000000000..1e97127714c Binary files /dev/null and b/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-readonly-1-chromium---theme-classic-light-linux.png differ