fix(components/input-icon-button): disabled button should not fire ev…

…ents #1823
zyfra · Jun 19, 2024 · e5ec232 · e5ec232
1 parent 9475c7a
commit e5ec232
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 10 deletions.
diff --git a/.../input-text/examples/input-icon-buttons-example/input-icon-buttons-example.component.html b/.../input-text/examples/input-icon-buttons-example/input-icon-buttons-example.component.html
@@ -4,7 +4,7 @@ <h3>Right template</h3>
  <input prizmInput />
 
  <ng-container prizm-input-right>
- <button prizmInputIconButton="add-circle"></button>
+ <button [disabled]="disabled" (click)="handleButtonClick()" prizmInputIconButton="add-circle"></button>
  </ng-container>
 </prizm-input-layout>
 
@@ -13,6 +13,11 @@ <h3>Left template</h3>
 <prizm-input-layout label="Заголовок">
  <ng-container prizm-input-left>
  <button prizmInputIconButton="arrows-refresh"></button>
+ <button
+ [disabled]="disabled"
+ (click)="handleButtonClick()"
+ prizmInputIconButton="arrows-refresh"
+ ></button>
  </ng-container>
 
  <input prizmInput />
@@ -22,30 +27,38 @@ <h3>Left and right template</h3>
 
 <prizm-input-layout label="Заголовок">
  <ng-container prizm-input-left>
- <button prizmInputIconButton="arrows-refresh"></button>
- <button prizmInputIconButton="badges-tag"></button>
+ <button
+ [disabled]="disabled"
+ (click)="handleButtonClick()"
+ prizmInputIconButton="arrows-refresh"
+ ></button>
+ <button [disabled]="disabled" (click)="handleButtonClick()" prizmInputIconButton="badges-tag"></button>
  </ng-container>
 
  <input prizmInput />
 
  <ng-container prizm-input-right>
- <button prizmInputIconButton="add-circle"></button>
+ <button [disabled]="disabled" (click)="handleButtonClick()" prizmInputIconButton="add-circle"></button>
  </ng-container>
 </prizm-input-layout>
 
 <h3>With status message</h3>
 
 <prizm-input-layout label="Заголовок" status="warning">
  <ng-container prizm-input-left>
- <button prizmInputIconButton="arrows-refresh"></button>
+ <button
+ [disabled]="disabled"
+ (click)="handleButtonClick()"
+ prizmInputIconButton="arrows-refresh"
+ ></button>
  </ng-container>
 
  <input prizmInput />
 
  <ng-template prizmInputStatusText>Warning text</ng-template>
 
  <ng-container prizm-input-right>
- <button prizmInputIconButton="add-circle"></button>
+ <button [disabled]="disabled" (click)="handleButtonClick()" prizmInputIconButton="add-circle"></button>
  </ng-container>
 </prizm-input-layout>
 
@@ -58,3 +71,16 @@ <h3>Only icon</h3>
 
  <input prizmInput />
 </prizm-input-layout>
+
+<br />
+<br />
+
+<div>
+ Disable
+ <prizm-toggle
+ [ngModel]="disabled"
+ [ngModelOptions]="{ standalone: true }"
+ (ngModelChange)="disabled = $event"
+ size="m"
+ ></prizm-toggle>
+</div>
diff --git a/...ut/input-text/examples/input-icon-buttons-example/input-icon-buttons-example.component.ts b/...ut/input-text/examples/input-icon-buttons-example/input-icon-buttons-example.component.ts
@@ -6,4 +6,10 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
  styleUrls: ['./input-icon-buttons-example.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class InputIconButtonsExampleComponent {}
+export class InputIconButtonsExampleComponent {
+ public disabled = false;
+
+ public handleButtonClick() {
+ console.log('Button clicked!');
+ }
+}
diff --git a/apps/doc/src/app/components/input/input-text/input-example.module.ts b/apps/doc/src/app/components/input/input-text/input-example.module.ts
@@ -6,12 +6,12 @@ import {
  PrizmHintDirective,
  PrizmIconComponent,
  PrizmInputTextModule,
+ PrizmToggleComponent,
 } from '@prizm-ui/components';
 import { PrizmAddonDocModule, prizmDocGenerateRoutes } from '@prizm-ui/doc';
 import { InputIconButtonsExampleComponent } from './examples/input-icon-buttons-example/input-icon-buttons-example.component';
 import { InputComponent } from './input.component';
 import { InputLabelPositionExampleComponent } from './examples/input-label-position-example/input-label-position-example.component';
-
 import { InputSizesExampleComponent } from './examples/input-sizes-example/input-sizes-example.component';
 import { InputStatusesExampleComponent } from './examples/input-statuses-example/input-statuses-example.component';
 import { InputSubtextExampleComponent } from './examples/input-subtext-example/input-subtext-example.component';
@@ -34,6 +34,7 @@ import { InputCustomClearButtonExampleComponent } from './examples/input-custom-
  PrizmButtonModule,
  ReactiveFormsModule,
  FormsModule,
+ PrizmToggleComponent,
  ],
  declarations: [
  InputComponent,

diff --git a/...mponents/src/lib/components/input/common/input-icon-button/input-icon-button.component.ts b/...mponents/src/lib/components/input/common/input-icon-button/input-icon-button.component.ts
@@ -19,14 +19,19 @@ export class PrizmInputIconButtonComponent extends PrizmAbstractTestId {
  @Input() prizmInputIconButton!: string;
  @Input() interactive = false;
 
- @HostBinding('class.disabled')
+ @HostBinding('attr.disabled')
  @Input()
  get disabled() {
- return this._disabled;
+ return this._disabled || null;
  }
  set disabled(value: BooleanInput) {
  this._disabled = coerceBooleanProperty(value);
  }
+
+ @HostBinding('class.disabled')
+ get classDisabled() {
+ return this._disabled;
+ }
  private _disabled = false;
  @Input()
  @HostBinding('attr.type')