[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

@@ -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

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();
     }
   }
 

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();
     }
   }