From 168288883270bec2bb46437778828bc8f01a9b27 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Thu, 8 Sep 2022 11:24:34 +0200
Subject: [PATCH] [player] Trigger validation checks of drop lists on focusout
- This makes the behavior identical to real form elements
- To trigger the focusout event, the HTML element needs
the tabindex attribute
---
docs/release-notes-player.txt | 2 +-
.../cloze/cloze-child-elements/drop-list-simple.component.ts | 5 ++---
.../common/components/input-elements/drop-list.component.ts | 5 ++---
3 files changed, 5 insertions(+), 7 deletions(-)
diff --git a/docs/release-notes-player.txt b/docs/release-notes-player.txt
index 63ecf615f..b9066e7fe 100644
--- a/docs/release-notes-player.txt
+++ b/docs/release-notes-player.txt
@@ -4,7 +4,7 @@ Player
- Improve performance by reducing the frequency of change notifications to the host
- Display pages in scroll mode without generated spacing
- Add scroll buttons to pages that can be scrolled
-- Add validation error functionality to cloze elements
+- Display validation errors for children of cloze elements and for drop lists
- Fix reset option of dropdown element
1.25.2
diff --git a/projects/common/components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component.ts b/projects/common/components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component.ts
index fe5d8e67a..b11f04612 100644
--- a/projects/common/components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component.ts
+++ b/projects/common/components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component.ts
@@ -34,6 +34,8 @@ import { DragNDropValueObject } from 'common/models/elements/element';
[cdkDropListData]="this"
[cdkDropListConnectedTo]="elementModel.connectedTo"
[cdkDropListEnterPredicate]="onlyOneItemPredicate"
+ tabindex="0"
+ (focusout)="elementFormControl.markAsTouched()"
(cdkDropListDropped)="drop($event)">
<ng-container *ngIf="!parentForm">
<ng-container *ngFor="let dropListValueElement of $any(elementModel.value)">
@@ -110,7 +112,6 @@ export class DropListSimpleComponent extends FormElementComponent {
this.elementFormControl.setValue(
(event.container.data.elementFormControl.value as DragNDropValueObject[])
);
- event.container.data.elementFormControl.markAsTouched();
} else {
transferArrayItem(
event.previousContainer.data.elementFormControl.value as unknown as DragNDropValueObject[],
@@ -125,8 +126,6 @@ export class DropListSimpleComponent extends FormElementComponent {
this.elementFormControl.setValue(
(event.container.data.elementFormControl.value as DragNDropValueObject[])
);
- event.container.data.elementFormControl.markAsTouched();
- event.previousContainer.data.elementFormControl.markAsTouched();
}
}
diff --git a/projects/common/components/input-elements/drop-list.component.ts b/projects/common/components/input-elements/drop-list.component.ts
index 79acca7f3..23a47f09c 100644
--- a/projects/common/components/input-elements/drop-list.component.ts
+++ b/projects/common/components/input-elements/drop-list.component.ts
@@ -36,6 +36,8 @@ import { FormElementComponent } from '../../directives/form-element-component.di
[cdkDropListConnectedTo]="elementModel.connectedTo"
[cdkDropListOrientation]="elementModel.orientation !== 'flex' ? $any(elementModel.orientation) : ''"
[cdkDropListEnterPredicate]="onlyOneItemPredicate"
+ tabindex="0"
+ (focusout)="elementFormControl.markAsTouched()"
(cdkDropListDropped)="drop($event)">
<ng-container *ngIf="!parentForm">
@@ -154,7 +156,6 @@ export class DropListComponent extends FormElementComponent {
this.elementFormControl.setValue(
(event.container.data.elementFormControl.value as DragNDropValueObject[])
);
- event.container.data.elementFormControl.markAsTouched();
} else {
const presentValueIDs = event.container.data.elementFormControl.value
.map((value2: DragNDropValueObject) => value2.id);
@@ -169,8 +170,6 @@ export class DropListComponent extends FormElementComponent {
(event.previousContainer.data.elementFormControl.value as DragNDropValueObject[])
);
}
- event.container.data.elementFormControl.markAsTouched();
- event.previousContainer.data.elementFormControl.markAsTouched();
}
}
--
GitLab