fix(cdk/drag-drop): preserve checked state for grouped radio inputs (#20237)

We transfer input `value` property while cloning draggable element, but
with several radio inputs that have the same `name` attribute we can face an
issue when checked state moves to cloned radio input element and we can't restore it
when dropping element.

These changes add unique name for all cloned elements: radio inputs
inside preview and placeholder. This makes sure that original input
won't lose its checked state once the clone is inserted in the DOM.

Fixes #20236

Author: alexzuza

src/cdk/drag-drop/clone-node.ts

@@ -44,9 +44,19 @@ function transferData<T extends Element>(selector: string, node: HTMLElement, cl
   }
 }
 
+// Counter for unique cloned radio button names.
+let cloneUniqueId = 0;
+
 /** Transfers the data of one input element to another. */
-function transferInputData(source: Element & {value: string}, clone: Element & {value: string}) {
+function transferInputData(source: Element & {value: string},
+                           clone: Element & {value: string; name: string; type: string}) {
   clone.value = source.value;
+  // Radio button `name` attributes must be unique for radio button groups
+  // otherwise original radio buttons can lose their checked state
+  // once the clone is inserted in the DOM.
+  if (clone.type === 'radio' && clone.name) {
+    clone.name = `mat-clone-${clone.name}-${cloneUniqueId++}`;
+  }
 }
 
 /** Transfers the data of one canvas element to another. */

src/cdk/drag-drop/directives/drag.spec.ts

@@ -2272,6 +2272,37 @@ describe('CdkDrag', () => {
       expect(previewSelect.value).toBe(value);
     }));
 
+    it('should preserve checked state for radio inputs in the content', fakeAsync(() => {
+      const fixture = createComponent(DraggableWithRadioInputsInDropZone);
+      fixture.detectChanges();
+      const item = fixture.componentInstance.dragItems.toArray()[2].element.nativeElement;
+      const sourceRadioInput =
+        item.querySelector<HTMLInputElement>('input[type="radio"]')!;
+
+      expect(sourceRadioInput.checked).toBeTruthy();
+
+      startDraggingViaMouse(fixture, item);
+
+      const preview = document.querySelector('.cdk-drag-preview')!;
+      const previewRadioInput = preview.querySelector<HTMLInputElement>('input[type="radio"]')!;
+      expect(previewRadioInput.checked).toBeTruthy(
+        'Expected cloned radio input in preview has the same state as original radio input');
+
+      const placeholder = document.querySelector('.cdk-drag-placeholder')!;
+      const placeholderRadioInput =
+        placeholder.querySelector<HTMLInputElement>('input[type="radio"]')!;
+      expect(placeholderRadioInput.checked).toBeTruthy(
+        'Expected cloned radio input in placeholder has the same state as original radio input');
+
+      dispatchMouseEvent(document, 'mouseup');
+      // Important to tick with 0 since we don't want to flush any pending timeouts.
+      // It also makes sure that all clones have been removed from the DOM.
+      tick(0);
+
+      expect(sourceRadioInput.checked)
+        .toBeTruthy('Expected original radio input has preserved its original checked state');
+    }));
+
     it('should clear the ids from descendants of the preview', fakeAsync(() => {
       const fixture = createComponent(DraggableInDropZone);
       fixture.detectChanges();
@@ -6463,6 +6494,31 @@ class DraggableWithInputsInDropZone extends DraggableInDropZone {
 }
 
 
+@Component({
+  template: `
+    <div
+      cdkDropList
+      class="drop-list scroll-container"
+      [cdkDropListData]="items">
+      <div
+        *ngFor="let item of items"
+        cdkDrag
+        [cdkDragData]="item">
+          {{item.id}}
+          <input type="radio" name="radio" [checked]="item.checked"/>
+        </div>
+    </div>
+  `
+})
+class DraggableWithRadioInputsInDropZone {
+  @ViewChildren(CdkDrag) dragItems: QueryList<CdkDrag>;
+  items = [
+    {id: 1, checked: false},
+    {id: 2, checked: false},
+    {id: 3, checked: true},
+  ];
+}
+
 /**
  * Drags an element to a position on the page using the mouse.
  * @param fixture Fixture on which to run change detection.