diff --git a/projects/core/styles/components/textfield.less b/projects/core/styles/components/textfield.less index e12904d30d3b..9ea18f7f9996 100644 --- 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 index 9376617dddee..f0cfedd096ae 100644 --- 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: ` - + { - 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 focused', () => { + 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'); + }); + }); });