Update RadioSelect adapter to handle CheckboxMultipleSelect widgets

This matches the inheritance pattern used on the Django side: 99f23eaabd/django/forms/widgets.py (L868)

client/src/entrypoints/admin/telepath/__snapshots__/widgets.test.js.snap

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`telepath: wagtail.widgets.RadioSelect for CheckboxSelectMultiple it renders correctly 1`] = `
+"<ul id="the-id">
+          <li>
+            <label for="the-id_0">
+            <input type="checkbox" name="the-name" value="red" id="the-id_0"> Red</label>
+          </li>
+          <li>
+            <label for="the-id_1">
+            <input type="checkbox" name="the-name" value="green" id="the-id_1"> Green</label>
+          </li>
+          <li>
+            <label for="the-id_2">
+            <input type="checkbox" name="the-name" value="blue" id="the-id_2"> Blue</label>
+          </li>
+        </ul>"
+`;
+
 exports[`telepath: wagtail.widgets.RadioSelect it renders correctly 1`] = `
 "<ul id="the-id">
           <li>

client/src/entrypoints/admin/telepath/widgets.js

@@ -152,25 +152,33 @@ class BoundRadioSelect {
     this.element = element;
     this.name = name;
     this.idForLabel = idForLabel;
+    this.isMultiple = !!this.element.querySelector(
+      `input[name="${name}"][type="checkbox"]`,
+    );
     this.selector = `input[name="${name}"]:checked`;
     this.setState(initialState);
   }
 
   getValue() {
+    if (this.isMultiple) {
+      return Array.from(this.element.querySelectorAll(this.selector)).map(
+        (el) => el.value,
+      );
+    }
     return this.element.querySelector(this.selector)?.value;
   }
 
   getState() {
-    return [this.element.querySelector(this.selector)?.value];
+    return Array.from(this.element.querySelectorAll(this.selector)).map(
+      (el) => el.value,
+    );
   }
 
   setState(state) {
     const inputs = this.element.querySelectorAll(`input[name="${this.name}"]`);
-    state.forEach((selectedValue) => {
-      for (let i = 0; i < inputs.length; i += 1) {
-        inputs[i].checked = inputs[i].value === selectedValue;
-      }
-    });
+    for (let i = 0; i < inputs.length; i += 1) {
+      inputs[i].checked = state.includes(inputs[i].value);
+    }
   }
 
   focus() {

client/src/entrypoints/admin/telepath/widgets.test.js

@@ -216,6 +216,64 @@ describe('telepath: wagtail.widgets.RadioSelect', () => {
   });
 });
 
+describe('telepath: wagtail.widgets.RadioSelect for CheckboxSelectMultiple', () => {
+  let boundWidget;
+
+  beforeEach(() => {
+    // Create a placeholder to render the widget
+    document.body.innerHTML = '<div id="placeholder"></div>';
+
+    const widgetDef = window.telepath.unpack({
+      _type: 'wagtail.widgets.RadioSelect',
+      _args: [
+        `<ul id="__ID__">
+          <li>
+            <label for="__ID___0">
+            <input type="checkbox" name="__NAME__" value="red" id="__ID___0"> Red</label>
+          </li>
+          <li>
+            <label for="__ID___1">
+            <input type="checkbox" name="__NAME__" value="green" id="__ID___1"> Green</label>
+          </li>
+          <li>
+            <label for="__ID___2">
+            <input type="checkbox" name="__NAME__" value="blue" id="__ID___2"> Blue</label>
+          </li>
+        </ul>`,
+        '__ID___0',
+      ],
+    });
+    boundWidget = widgetDef.render(
+      document.getElementById('placeholder'),
+      'the-name',
+      'the-id',
+      ['red', 'blue'],
+    );
+  });
+
+  test('it renders correctly', () => {
+    expect(document.body.innerHTML).toMatchSnapshot();
+    expect(document.querySelector('input[value="red"]').checked).toBe(true);
+    expect(document.querySelector('input[value="green"]').checked).toBe(false);
+    expect(document.querySelector('input[value="blue"]').checked).toBe(true);
+  });
+
+  test('getValue() returns the current value', () => {
+    expect(boundWidget.getValue()).toStrictEqual(['red', 'blue']);
+  });
+
+  test('getState() returns the current state', () => {
+    expect(boundWidget.getState()).toStrictEqual(['red', 'blue']);
+  });
+
+  test('setState() changes the current state', () => {
+    boundWidget.setState(['red', 'green']);
+    expect(document.querySelector('input[value="red"]').checked).toBe(true);
+    expect(document.querySelector('input[value="green"]').checked).toBe(true);
+    expect(document.querySelector('input[value="blue"]').checked).toBe(false);
+  });
+});
+
 describe('telepath: wagtail.widgets.CheckboxInput', () => {
   let boundWidget;
 

wagtail/widget_adapters.py

@@ -36,7 +36,6 @@ class WidgetAdapter(Adapter):
 
 register(WidgetAdapter(), forms.widgets.Input)
 register(WidgetAdapter(), forms.Textarea)
-register(WidgetAdapter(), forms.CheckboxSelectMultiple)
 
 
 class CheckboxInputAdapter(WidgetAdapter):
@@ -51,6 +50,7 @@ class RadioSelectAdapter(WidgetAdapter):
 
 
 register(RadioSelectAdapter(), forms.RadioSelect)
+register(RadioSelectAdapter(), forms.CheckboxSelectMultiple)
 
 
 class SelectAdapter(WidgetAdapter):