From c10b2868a2051743862fc9bc86b776e9939f3421 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Mon, 18 Oct 2021 10:44:34 +0200
Subject: [PATCH] [player] Prevent form validation when clicking buttons
---
.../common/element-components/button.component.ts | 8 ++++++++
.../element-components/text-field.component.ts | 8 +++++++-
.../common/element-components/text.component.ts | 14 ++++++++++----
3 files changed, 25 insertions(+), 5 deletions(-)
diff --git a/projects/common/element-components/button.component.ts b/projects/common/element-components/button.component.ts
index 30db5ad0b..a34676a40 100644
--- a/projects/common/element-components/button.component.ts
+++ b/projects/common/element-components/button.component.ts
@@ -10,6 +10,7 @@ import { ButtonElement } from '../models/button-element';
[style.height.%]="100">
<button *ngIf="!elementModel.imageSrc" mat-button
(focusin)="onFocusin.emit()"
+ (click)="onClick($event)"
[style.width.%]="100"
[style.height.%]="100"
[style.background-color]="elementModel.backgroundColor"
@@ -23,6 +24,8 @@ import { ButtonElement } from '../models/button-element';
{{elementModel.label}}
</button>
<input *ngIf="elementModel.imageSrc" type="image"
+ (focusin)="onFocusin.emit()"
+ (click)="onClick($event)"
[src]="elementModel.imageSrc | safeResourceUrl"
[class]="elementModel.dynamicPositioning? 'dynamic-image' : 'static-image'"
[alt]="'imageNotFound' | translate">
@@ -36,4 +39,9 @@ import { ButtonElement } from '../models/button-element';
export class ButtonComponent extends ElementComponent {
@Output() onFocusin = new EventEmitter();
elementModel!: ButtonElement;
+
+ onClick = (event: MouseEvent): void => {
+ event.stopPropagation();
+ event.preventDefault();
+ };
}
diff --git a/projects/common/element-components/text-field.component.ts b/projects/common/element-components/text-field.component.ts
index 01926d308..5fb749260 100644
--- a/projects/common/element-components/text-field.component.ts
+++ b/projects/common/element-components/text-field.component.ts
@@ -24,7 +24,7 @@ import { TextFieldElement } from '../models/text-field-element';
[formControl]="elementFormControl"
placeholder="{{elementModel.label}}">
<button *ngIf="elementModel.clearable" matSuffix mat-icon-button aria-label="Clear"
- (click)="elementFormControl.setValue('')">
+ (click)="onClick($event)">
<mat-icon>close</mat-icon>
</button>
<mat-error *ngIf="elementFormControl.errors">
@@ -39,6 +39,12 @@ export class TextFieldComponent extends FormElementComponent {
@Output() onBlur = new EventEmitter<HTMLElement>();
elementModel!: TextFieldElement;
+ onClick(event: MouseEvent) : void {
+ this.elementFormControl.setValue('');
+ event.preventDefault();
+ event.stopPropagation();
+ }
+
get validators(): ValidatorFn[] {
const validators: ValidatorFn[] = [];
if (this.elementModel.required) {
diff --git a/projects/common/element-components/text.component.ts b/projects/common/element-components/text.component.ts
index e1f4b1d9a..5e2ca18e5 100644
--- a/projects/common/element-components/text.component.ts
+++ b/projects/common/element-components/text.component.ts
@@ -13,19 +13,19 @@ import { TextElement } from '../models/text-element';
<div *ngIf="elementModel.highlightable"
class="marking-bar">
<button class="marking-button" mat-mini-fab [style.background-color]="'yellow'"
- (click)="applySelection.emit({color:'yellow', element: container, clear: false})">
+ (click)="onClick($event, {color:'yellow', element: container, clear: false})">
<mat-icon>border_color</mat-icon>
</button>
<button class="marking-button" mat-mini-fab [style.background-color]="'turquoise'"
- (click)="applySelection.emit({color: 'turquoise', element: container, clear: false})">
+ (click)="onClick($event, {color: 'turquoise', element: container, clear: false})">
<mat-icon>border_color</mat-icon>
</button>
<button class="marking-button" mat-mini-fab [style.background-color]="'orange'"
- (click)="applySelection.emit({color: 'orange', element: container, clear: false})">
+ (click)="onClick($event, {color: 'orange', element: container, clear: false})">
<mat-icon>border_color</mat-icon>
</button>
<button class="marking-button" [style.background-color]="'lightgrey'" mat-mini-fab
- (click)="applySelection.emit({color: 'none', element: container, clear: true})">
+ (click)="onClick($event, {color: 'none', element: container, clear: true})">
<mat-icon>clear</mat-icon>
</button>
</div>
@@ -53,4 +53,10 @@ export class TextComponent extends ElementComponent {
constructor(public sanitizer: DomSanitizer) {
super();
}
+
+ onClick(event: MouseEvent, markingValues: { color: string; element: HTMLElement; clear: boolean }) : void {
+ this.applySelection.emit(markingValues);
+ event.preventDefault();
+ event.stopPropagation();
+ }
}
--
GitLab