Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(legacy): InputDate incorrect value after backspace #9650

Merged
merged 4 commits into from
Nov 5, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions projects/cdk/constants/regexp.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export const TUI_DIGIT_REGEXP = /\d/;
export const TUI_NON_DIGIT_REGEXP = /\D/;
export const TUI_NON_DIGITS_REGEXP = /\D+/g;
export const TUI_LETTER_REGEXP = /\p{L}/u;
Original file line number Diff line number Diff line change
Expand Up @@ -181,17 +181,42 @@
await expect(inputDate.textfield).toHaveScreenshot('10-input-date.png');
});

test('Click `Until today`', async ({page}) => {
await tuiGoto(page, 'components/input-date/API?items$=1');
test('Click `Until today`, calendar not switched to large date', async ({
page,
}) => {
await tuiGoto(page, `${DemoRoute.InputDate}/API?items$=1`);

await inputDate.textfield.click();
await calendar.itemButton.click();

await inputDate.textfield.click();

await expect(inputDate.calendar).toHaveScreenshot(
'02-input-date-calendar.png',
);
await expect(inputDate.calendar).toHaveScreenshot('11-input-date.png');
});

test('Press backspace to remove `Until today`, textfield is empty', async ({
page,
}) => {
await tuiGoto(page, `${DemoRoute.InputDate}/API?items$=1`);

await inputDate.textfield.click();
await calendar.itemButton.click();

await inputDate.textfield.focus();
await inputDate.textfield.press('Backspace');

await expect(inputDate.textfield).toHaveValue('');

Check failure on line 208 in projects/demo-playwright/tests/legacy/input-date/input-date.spec.ts

View workflow job for this annotation

GitHub Actions / Playwright / (7 of 9)

[chromium] › tests/legacy/input-date/input-date.spec.ts:197:13 › InputDate › API › Press backspace to remove `Until today`

1) [chromium] › tests/legacy/input-date/input-date.spec.ts:197:13 › InputDate › API › Press backspace to remove `Until today`, textfield is empty Error: Timed out 5000ms waiting for expect(locator).toHaveValue(expected) Locator: locator('#demo-content').locator('tui-input-date').getByRole('textbox') Expected string: "" Received string: "01.01.0000" Call log: - expect.toHaveValue with timeout 5000ms - waiting for locator('#demo-content').locator('tui-input-date').getByRole('textbox') - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" 206 | await inputDate.textfield.press('Backspace'); 207 | > 208 | await expect(inputDate.textfield).toHaveValue(''); | ^ 209 | await expect(inputDate.textfield).toHaveScreenshot('12-input-date.png'); 210 | }); 211 | at /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests/legacy/input-date/input-date.spec.ts:208:47

Check failure on line 208 in projects/demo-playwright/tests/legacy/input-date/input-date.spec.ts

View workflow job for this annotation

GitHub Actions / Playwright / (7 of 9)

[chromium] › tests/legacy/input-date/input-date.spec.ts:197:13 › InputDate › API › Press backspace to remove `Until today`

1) [chromium] › tests/legacy/input-date/input-date.spec.ts:197:13 › InputDate › API › Press backspace to remove `Until today`, textfield is empty Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: Timed out 5000ms waiting for expect(locator).toHaveValue(expected) Locator: locator('#demo-content').locator('tui-input-date').getByRole('textbox') Expected string: "" Received string: "01.01.0000" Call log: - expect.toHaveValue with timeout 5000ms - waiting for locator('#demo-content').locator('tui-input-date').getByRole('textbox') - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" 206 | await inputDate.textfield.press('Backspace'); 207 | > 208 | await expect(inputDate.textfield).toHaveValue(''); | ^ 209 | await expect(inputDate.textfield).toHaveScreenshot('12-input-date.png'); 210 | }); 211 | at /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests/legacy/input-date/input-date.spec.ts:208:47

Check failure on line 208 in projects/demo-playwright/tests/legacy/input-date/input-date.spec.ts

View workflow job for this annotation

GitHub Actions / Playwright / (7 of 9)

[chromium] › tests/legacy/input-date/input-date.spec.ts:197:13 › InputDate › API › Press backspace to remove `Until today`

1) [chromium] › tests/legacy/input-date/input-date.spec.ts:197:13 › InputDate › API › Press backspace to remove `Until today`, textfield is empty Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── Error: Timed out 5000ms waiting for expect(locator).toHaveValue(expected) Locator: locator('#demo-content').locator('tui-input-date').getByRole('textbox') Expected string: "" Received string: "01.01.0000" Call log: - expect.toHaveValue with timeout 5000ms - waiting for locator('#demo-content').locator('tui-input-date').getByRole('textbox') - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" - locator resolved to <input tabindex="0" aria-invalid="false" _ngcontent-ng-c3831396199="" id="tui_interactive_491601061540000" class="t-input ng-untouched ng-valid ng-dirty" automation-id="tui-primitive-textfield__native-input"/> - unexpected value "01.01.0000" 206 | await inputDate.textfield.press('Backspace'); 207 | > 208 | await expect(inputDate.textfield).toHaveValue(''); | ^ 209 | await expect(inputDate.textfield).toHaveScreenshot('12-input-date.png'); 210 | }); 211 | at /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests/legacy/input-date/input-date.spec.ts:208:47
await expect(inputDate.textfield).toHaveScreenshot('12-input-date.png');
});

test('Enter item date, it converts to item name', async ({page}) => {
await tuiGoto(page, `${DemoRoute.InputDate}/API?items$=1`);

await inputDate.textfield.focus();
await inputDate.textfield.fill('31.12.9998');

await expect(inputDate.textfield).toHaveValue('Until today');
await expect(inputDate.textfield).toHaveScreenshot('13-input-date.png');
});
});

Expand Down
10 changes: 7 additions & 3 deletions projects/legacy/components/input-date/input-date.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ import {
} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import type {MaskitoOptions} from '@maskito/core';
import {MASKITO_DEFAULT_OPTIONS} from '@maskito/core';
import {MASKITO_DEFAULT_OPTIONS, maskitoTransform} from '@maskito/core';
import {maskitoDateOptionsGenerator} from '@maskito/kit';
import {tuiAsControl} from '@taiga-ui/cdk/classes';
import {TUI_FALSE_HANDLER} from '@taiga-ui/cdk/constants';
import {TUI_FALSE_HANDLER, TUI_LETTER_REGEXP} from '@taiga-ui/cdk/constants';
import type {TuiDateMode} from '@taiga-ui/cdk/date-time';
import {
DATE_FILLER_LENGTH,
Expand Down Expand Up @@ -174,9 +174,13 @@ export class TuiInputDateComponent
}

this.value =
value.length !== DATE_FILLER_LENGTH
value.length !== DATE_FILLER_LENGTH || TUI_LETTER_REGEXP.test(value)
? null
: TuiDay.normalizeParse(value, this.dateFormat.mode);

if (TUI_LETTER_REGEXP.test(this.nativeValue)) {
vladimirpotekhin marked this conversation as resolved.
Show resolved Hide resolved
this.nativeValue = maskitoTransform(this.nativeValue, this.computedMask);
nsbarsukov marked this conversation as resolved.
Show resolved Hide resolved
}
}

public override setDisabledState(): void {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,14 @@ describe('InputDate', () => {
expect(inputPO.value).toBe('14.03.2017');
});

it('if there is min and an initial value and an initial value less than min - keep the initial value', () => {
testComponent.min = new TuiDay(2023, 5, 17);

fixture.detectChanges();

expect(inputPO.value).toBe('01.03.2017');
});

describe('Keyboard input', () => {
it('the passed date is inserted into the field', () => {
inputPO.sendText('01.03.2017');
Expand Down
Loading