From 11be4da10e99b8797dced7c7f5d0b79d08c2f67b Mon Sep 17 00:00:00 2001 From: Nikita Barsukov Date: Fri, 15 Sep 2023 13:24:17 +0300 Subject: [PATCH 1/3] fix(kit): `InputRange` should not validate `quantum` if textfield is focused --- .../input-range/input-range.component.ts | 38 +++++++------------ .../input-range/input-range.template.html | 8 ++-- .../test/input-range.component.spec.ts | 20 ++++++++++ 3 files changed, 38 insertions(+), 28 deletions(-) diff --git a/projects/kit/components/input-range/input-range.component.ts b/projects/kit/components/input-range/input-range.component.ts index 11406f8cf866..841db5f967e2 100644 --- a/projects/kit/components/input-range/input-range.component.ts +++ b/projects/kit/components/input-range/input-range.component.ts @@ -93,6 +93,8 @@ export class TuiInputRangeComponent @Input() pluralize: Record | null = null; + leftTextfieldValue = this.safeCurrentValue[0]; + rightTextfieldValue = this.safeCurrentValue[1]; lastActiveSide: 'left' | 'right' = 'left'; constructor( @@ -178,18 +180,12 @@ export class TuiInputRangeComponent this.updateFocused(active); } - onTextInputFocused(focused: boolean, right: boolean): void { + onTextInputFocused(focused: boolean): void { if (focused) { return; } - const [leftTextInputRef, rightTextInputRef] = this.inputNumberRefs; - const inputRef = right ? rightTextInputRef : leftTextInputRef; - const valueIndex = right ? 1 : 0; - - if (!inputRef.nativeValue || inputRef.value !== this.value[valueIndex]) { - this.updateTextInputValue(this.safeCurrentValue[valueIndex], right); - } + this.updateTextfieldValues(this.value); } changeByStep( @@ -211,10 +207,7 @@ export class TuiInputRangeComponent if (leftValueChanged || rightValueChanged) { this.safelyUpdateValue(newValue); - this.updateTextInputValue( - newValue[rightValueChanged ? 1 : 0], - rightValueChanged, - ); + this.updateTextfieldValues(this.value); } } @@ -228,13 +221,7 @@ export class TuiInputRangeComponent onRangeValue(value: [number, number]): void { this.safelyUpdateValue(value); - - const rightValueChanged = this.lastActiveSide === 'right'; - - this.updateTextInputValue( - this.value[rightValueChanged ? 1 : 0], - rightValueChanged, - ); + this.updateTextfieldValues(this.value); } focusToTextInput(): void { @@ -252,6 +239,11 @@ export class TuiInputRangeComponent this.lastActiveSide = activeThumb; } + override writeValue(value: [number, number]): void { + super.writeValue(value); + this.updateTextfieldValues(this.value); + } + protected getFallbackValue(): [number, number] { return [0, 0]; } @@ -279,10 +271,8 @@ export class TuiInputRangeComponent return tuiClamp(roundedValue, this.min, this.max); } - private updateTextInputValue(value: number, right: boolean): void { - const [leftInputRef, rightInputRef] = this.inputNumberRefs; - const textInputRef = right ? rightInputRef : leftInputRef; - - textInputRef?.writeValue(value); + private updateTextfieldValues([leftValue, rightValue]: [number, number]): void { + this.leftTextfieldValue = leftValue; + this.rightTextfieldValue = rightValue; } } diff --git a/projects/kit/components/input-range/input-range.template.html b/projects/kit/components/input-range/input-range.template.html index 8fd37231184c..e88cdc3ee6ba 100644 --- a/projects/kit/components/input-range/input-range.template.html +++ b/projects/kit/components/input-range/input-range.template.html @@ -17,11 +17,11 @@ [disabled]="computedDisabled" [max]="value[1]" [min]="min" - [ngModel]="value[0]" [precision]="precision" [readOnly]="readOnly" [tuiTextfieldPostfix]="pluralize && !showLeftValueContent ? (value[0] | i18nPlural: pluralize) : ''" - (focusedChange)="onTextInputFocused($event, false)" + [(ngModel)]="leftTextfieldValue" + (focusedChange)="onTextInputFocused($event)" (keydown.arrowDown)="changeByStep($event, [-1, 0])" (keydown.arrowUp)="changeByStep($event, [1, 0])" (ngModelChange)="onInputLeft($event)" @@ -45,11 +45,11 @@ [disabled]="computedDisabled" [max]="max" [min]="value[0]" - [ngModel]="value[1]" [precision]="precision" [readOnly]="readOnly" [tuiTextfieldPostfix]="pluralize && !showRightValueContent ? (value[1] | i18nPlural: pluralize) : ''" - (focusedChange)="onTextInputFocused($event, true)" + [(ngModel)]="rightTextfieldValue" + (focusedChange)="onTextInputFocused($event)" (keydown.arrowDown)="changeByStep($event, [0, -1])" (keydown.arrowUp)="changeByStep($event, [0, 1])" (ngModelChange)="onInputRight($event)" diff --git a/projects/kit/components/input-range/test/input-range.component.spec.ts b/projects/kit/components/input-range/test/input-range.component.spec.ts index 7cfc2fd25e98..26b64077340c 100644 --- a/projects/kit/components/input-range/test/input-range.component.spec.ts +++ b/projects/kit/components/input-range/test/input-range.component.spec.ts @@ -149,6 +149,18 @@ describe(`InputRange`, () => { expect(inputPORight.value).toBe(`5 лет`); }); + + it(`does not rounds to nearest multiple of [quantum] until text field losses focus`, () => { + inputPORight.sendText(`8`); + + expect(inputPORight.value).toBe(`8 лет`); + expect(testComponent.control.value[1]).toBe(10); + + inputPORight.blur(); + + expect(inputPORight.value).toBe(`10 лет`); + expect(testComponent.control.value[1]).toBe(10); + }); }); describe(`Deleting Values`, () => { @@ -197,6 +209,14 @@ describe(`InputRange`, () => { .replace(CHAR_HYPHEN, CHAR_MINUS)} лет`, ); }); + + it(`programmatic FormControl updates should also update textfield value`, async () => { + testComponent.control.patchValue([5, 10]); + await fixture.whenStable(); + + expect(inputPOLeft.value).toBe(`5 лет`); + expect(inputPORight.value).toBe(`10 лет`); + }); }); describe(`Format`, () => { From ed400e1069ff855642bf0dd62e66790dd6005622 Mon Sep 17 00:00:00 2001 From: Nikita Barsukov Date: Mon, 18 Sep 2023 13:45:15 +0300 Subject: [PATCH 2/3] chore: fix review comments --- .../components/input-range/input-range.component.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/projects/kit/components/input-range/input-range.component.ts b/projects/kit/components/input-range/input-range.component.ts index 841db5f967e2..2be74886a463 100644 --- a/projects/kit/components/input-range/input-range.component.ts +++ b/projects/kit/components/input-range/input-range.component.ts @@ -181,11 +181,9 @@ export class TuiInputRangeComponent } onTextInputFocused(focused: boolean): void { - if (focused) { - return; + if (!focused) { + this.updateTextfieldValues(this.value); } - - this.updateTextfieldValues(this.value); } changeByStep( @@ -202,10 +200,8 @@ export class TuiInputRangeComponent this.value[0] + leftCoefficient * this.step, this.value[1] + rightCoefficient * this.step, ]); - const leftValueChanged = newValue[0] !== this.value[0]; - const rightValueChanged = newValue[1] !== this.value[1]; - if (leftValueChanged || rightValueChanged) { + if (newValue[0] !== this.value[0] || newValue[1] !== this.value[1]) { this.safelyUpdateValue(newValue); this.updateTextfieldValues(this.value); } From b05a93c056a7b3c6affc9a79b4e62495becbc449 Mon Sep 17 00:00:00 2001 From: Nikita Barsukov Date: Mon, 18 Sep 2023 14:39:55 +0300 Subject: [PATCH 3/3] chore: fix more review comments --- projects/kit/components/input-range/input-range.component.ts | 5 ++--- .../kit/components/input-range/input-range.template.html | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/projects/kit/components/input-range/input-range.component.ts b/projects/kit/components/input-range/input-range.component.ts index 2be74886a463..69fdc8775704 100644 --- a/projects/kit/components/input-range/input-range.component.ts +++ b/projects/kit/components/input-range/input-range.component.ts @@ -202,8 +202,7 @@ export class TuiInputRangeComponent ]); if (newValue[0] !== this.value[0] || newValue[1] !== this.value[1]) { - this.safelyUpdateValue(newValue); - this.updateTextfieldValues(this.value); + this.onExternalValueUpdate(newValue); } } @@ -215,7 +214,7 @@ export class TuiInputRangeComponent this.safelyUpdateValue([this.value[0], value ?? this.safeCurrentValue[1]]); } - onRangeValue(value: [number, number]): void { + onExternalValueUpdate(value: [number, number]): void { this.safelyUpdateValue(value); this.updateTextfieldValues(this.value); } diff --git a/projects/kit/components/input-range/input-range.template.html b/projects/kit/components/input-range/input-range.template.html index e88cdc3ee6ba..3d347ce0c144 100644 --- a/projects/kit/components/input-range/input-range.template.html +++ b/projects/kit/components/input-range/input-range.template.html @@ -75,7 +75,7 @@ [segments]="segments" [step]="step" (activeThumbChange)="onActiveThumbChange($event)" - (ngModelChange)="onRangeValue($event)" + (ngModelChange)="onExternalValueUpdate($event)" (tuiPressedChange)="focusToTextInput()" >