fix(kit): InputSlider broken disabled state (#4031)

taiga-family · Mar 30, 2023 · f21ddc7 · f21ddc7
1 parent 879ff6f
commit f21ddc7
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/projects/demo-integrations/cypress/tests/kit/input-slider/input-slider.cy.ts b/projects/demo-integrations/cypress/tests/kit/input-slider/input-slider.cy.ts
@@ -84,6 +84,19 @@ describe(`InputSlider`, () => {
         });
     });
 
+    it(`disables both text field and slider when host component has disabled state`, () => {
+        cy.viewport(`iphone-x`);
+        cy.tuiVisit(`components/input-slider/API?min=-10&max=10`);
+        initializeAliases(`#demo-content tui-input-slider`);
+
+        cy.get(`tr`).contains(`Disabled state`).parents(`tr`).find(`tui-toggle`).click();
+
+        cy.get(`@textInput`).should(`be.disabled`);
+        cy.get(`@slider`).should(`be.disabled`);
+
+        cy.get(`#demo-content`).matchImageSnapshot(`5-disabled-state`);
+    });
+
     function initializeAliases(inputSliderSelector: string): void {
         cy.get(`${inputSliderSelector} input[type="range"]`)
             .should(`be.visible`)

diff --git a/projects/kit/components/input-slider/input-slider.template.html b/projects/kit/components/input-slider/input-slider.template.html
@@ -5,6 +5,7 @@
     [decimal]="decimal"
     [tuiTextfieldPrefix]="showValueContent ? '' : prefix"
     [tuiTextfieldPostfix]="showValueContent ? '' : postfix"
+    [disabled]="computedDisabled"
     [readOnly]="readOnly"
     [pseudoFocus]="computedFocused"
     [pseudoHover]="pseudoHover"
@@ -35,7 +36,7 @@
     [max]="computedSteps"
     [segments]="segments"
     [keySteps]="computeKeySteps(keySteps, min, max)"
-    [attr.disabled]="readOnly || disabled || null"
+    [attr.disabled]="readOnly || computedDisabled || null"
     [ngModel]="value"
     (ngModelChange)="onSliderChange($event)"
     (click)="focusTextInput()"