fix(submission): keep keyboard reorder-cancel and clear-entry consistent

Both from the Copilot review of this PR; both are regressions this PR introduced.

cancelKeyboardDragAndDrop() still moved the group models only, so Escape after a
keyboard reorder restored the model order while leaving the FormArray as it was -
the exact desync this PR set out to remove. It now goes through
moveGroupAndControl() like the drag and arrow-key paths.

Dropping the clear entry's (click) handler to stop it firing twice per mouse
interaction also removed its keyboard activation, since a native button turns
Enter into a click. It now carries (keydown.enter) alongside (mousedown), which
mirrors how the options are bound.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: milanmajchrak

src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.row-binding.spec.ts

@@ -19,6 +19,7 @@ import {
   ReactiveFormsModule,
   UntypedFormArray,
 } from '@angular/forms';
+import { By } from '@angular/platform-browser';
 import {
   DYNAMIC_FORM_CONTROL_MAP_FN,
   DynamicFormLayoutService,
@@ -173,6 +174,37 @@ describe('DsDynamicFormArrayComponent row/control binding', () => {
     expect(boundValue(1)).withContext('Dataset moved up into position 1').toBe('Dataset');
   });
 
+  it('keeps rows and controls in sync when a keyboard reorder is cancelled', () => {
+    const dropList = fixture.debugElement.query(By.css('.cdk-drop-list')).nativeElement;
+    const rowEl = dropList.querySelectorAll('[cdkDrag]')[0] as HTMLDivElement;
+
+    // Pick row 0 up, move it down twice, then abandon the reorder with Escape.
+    component.toggleKeyboardDragAndDrop(new KeyboardEvent('keydown', { key: ' ' }), rowEl, 0, 3);
+    component.handleArrowPress(new KeyboardEvent('keydown', { key: 'ArrowDown' }), dropList, 3, 0, 'down');
+    component.handleArrowPress(new KeyboardEvent('keydown', { key: 'ArrowDown' }), dropList, 3, 1, 'down');
+    fixture.detectChanges();
+
+    component.cancelKeyboardDragAndDrop(rowEl, 2, 3);
+    fixture.detectChanges();
+
+    expect([boundValue(0), boundValue(1), boundValue(2)])
+      .withContext('cancelling must restore the original order for models AND controls')
+      .toEqual(['Article', 'Book', 'Dataset']);
+  });
+
+  it('keeps rows and controls in sync through a completed keyboard reorder', () => {
+    const dropList = fixture.debugElement.query(By.css('.cdk-drop-list')).nativeElement;
+    const rowEl = dropList.querySelectorAll('[cdkDrag]')[0] as HTMLDivElement;
+
+    component.toggleKeyboardDragAndDrop(new KeyboardEvent('keydown', { key: ' ' }), rowEl, 0, 3);
+    component.handleArrowPress(new KeyboardEvent('keydown', { key: 'ArrowDown' }), dropList, 3, 0, 'down');
+    fixture.detectChanges();
+
+    expect([boundValue(0), boundValue(1), boundValue(2)])
+      .withContext('Article moved down one place, controls followed')
+      .toEqual(['Book', 'Article', 'Dataset']);
+  });
+
   it('rebinds after a row is inserted in the middle', () => {
     forms.insertFormArrayGroup(1, formArray(), component.model);
     fixture.detectChanges();

src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts

@@ -252,7 +252,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
   }
 
   cancelKeyboardDragAndDrop(sortableElement: HTMLDivElement, index: number, length: number) {
-    this.model.moveGroup(index, this.elementBeingSortedStartingIndex - index);
+    this.moveGroupAndControl(index, this.elementBeingSortedStartingIndex);
     if (hasValue(this.model.groups[this.elementBeingSortedStartingIndex]) && hasValue((this.control as any).controls[this.elementBeingSortedStartingIndex])) {
       this.onCustomEvent({
         previousIndex: index,

src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html

@@ -59,8 +59,10 @@
       <!-- Clearing is destructive and must sit at the END of the menu. As the first entry it was
            rendered directly beneath the input, exactly where a click meant to close the menu lands,
            so dismissing the dropdown wiped the value instead.
-           A single handler: carrying both (click) and (mousedown) fired it twice per interaction. -->
+           (mousedown) + (keydown.enter) mirrors the options above: carrying (click) as well fired
+           it twice per mouse interaction, but dropping it outright left clearing mouse-only. -->
       <button class="dropdown-item collection-item text-truncate scrollable-dropdown-clear"
+              (keydown.enter)="onSelect(undefined); sdRef.close()"
               (mousedown)="onSelect(undefined); sdRef.close()"
               title="{{ 'dropdown.clear.tooltip' | translate }}" role="option"
               type="button">

src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.duplicate.spec.ts

@@ -291,6 +291,17 @@ describe('DsDynamicScrollableDropdownComponent duplicate/clearing regressions',
         .withContext('the first entry of the menu must not be the clear action').toBeFalsy();
     });
 
+    it('clears from the keyboard as well as the mouse', () => {
+      // The options are reachable with Enter; dropping the clear entry's (click) handler in favour
+      // of (mousedown) must not leave it mouse-only.
+      const clear = fixture.debugElement.query(By.css('button.dropdown-item.scrollable-dropdown-clear'));
+      spyOn(comp, 'onSelect');
+
+      clear.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+
+      expect(comp.onSelect).toHaveBeenCalledTimes(1);
+    });
+
     it('keeps the clear entry available (further down the menu)', () => {
       const clear = fixture.debugElement.query(By.css('button.dropdown-item.scrollable-dropdown-clear'));
       expect(clear).withContext('clearing must still be possible').not.toBeNull();