fix(core): Textfield with [content] property has invalid behavior…

… for `<input />` (#10066)
taiga-family · Dec 26, 2024 · aa9ff64 · aa9ff64
1 parent 92e8b21
commit aa9ff64
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 3 deletions.
diff --git a/projects/core/styles/components/textfield.less b/projects/core/styles/components/textfield.less
@@ -182,8 +182,10 @@ tui-textfield {
     .t-template {
         display: flex;
         align-items: center;
+        color: var(--tui-text-primary);
     }
 
+    &._with-template input,
     &._with-template select {
         color: transparent !important;
     }

diff --git a/projects/demo-cypress/src/tests/textfield.cy.ts b/projects/demo-cypress/src/tests/textfield.cy.ts
@@ -7,7 +7,11 @@ import {TUI_ANIMATIONS_SPEED, TuiRoot, TuiTextfield} from '@taiga-ui/core';
     imports: [FormsModule, TuiRoot, TuiTextfield],
     template: `
         <tui-root>
-            <tui-textfield [filler]="filler">
+            <tui-textfield
+                #textfield
+                [content]="textfield.focused() ? '' : content"
+                [filler]="filler"
+            >
                 <input
                     tuiTextfield
                     [(ngModel)]="initialValue"
@@ -24,12 +28,15 @@ export class TestTextfield {
 
     @Input()
     public filler = '';
+
+    @Input()
+    public content = '';
 }
 
 describe('Textfield', () => {
-    describe('[filler] property', () => {
-        beforeEach(() => cy.viewport(200, 150));
+    beforeEach(() => cy.viewport(200, 150));
 
+    describe('[filler] property', () => {
         describe('with initial value', () => {
             ['2', '23', '23:', '23:5', '23:59'].forEach((initialValue) => {
                 it(initialValue, () => {
@@ -70,4 +77,34 @@ describe('Textfield', () => {
             });
         });
     });
+
+    describe('[content] property', () => {
+        beforeEach(() => {
+            cy.mount(TestTextfield, {
+                componentProperties: {
+                    initialValue: '42',
+                    content: 'TOP-SECRET',
+                },
+            });
+        });
+
+        it('shows content for untouched field without focus', () => {
+            cy.get('tui-textfield').compareSnapshot('[content]-pristine-unfocused');
+        });
+
+        it('hides content and show value on focus', () => {
+            cy.get('input[tuiTextfield]').focus();
+
+            cy.get('tui-textfield').compareSnapshot('[content]-focused');
+        });
+
+        it('shows content again after blur', () => {
+            cy.get('input[tuiTextfield]')
+                .focus()
+                .wait(300) // to ensure that all possible operations are finished
+                .blur();
+
+            cy.get('tui-textfield').compareSnapshot('[content]-after-blur');
+        });
+    });
 });