diff --git a/client/src/entrypoints/admin/telepath/__snapshots__/widgets.test.js.snap b/client/src/entrypoints/admin/telepath/__snapshots__/widgets.test.js.snap
index 40612d575e..d7f5b6c148 100644
--- a/client/src/entrypoints/admin/telepath/__snapshots__/widgets.test.js.snap
+++ b/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`] = `
+"
"
+`;
+
exports[`telepath: wagtail.widgets.RadioSelect it renders correctly 1`] = `
"
-
diff --git a/client/src/entrypoints/admin/telepath/widgets.js b/client/src/entrypoints/admin/telepath/widgets.js
index 7c2a22ea17..0141a62782 100644
--- a/client/src/entrypoints/admin/telepath/widgets.js
+++ b/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() {
diff --git a/client/src/entrypoints/admin/telepath/widgets.test.js b/client/src/entrypoints/admin/telepath/widgets.test.js
index 6325cf24ba..e474bdb6f2 100644
--- a/client/src/entrypoints/admin/telepath/widgets.test.js
+++ b/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 = '';
+
+ const widgetDef = window.telepath.unpack({
+ _type: 'wagtail.widgets.RadioSelect',
+ _args: [
+ ``,
+ '__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;
diff --git a/wagtail/widget_adapters.py b/wagtail/widget_adapters.py
index 539bd58533..000e0d6963 100644
--- a/wagtail/widget_adapters.py
+++ b/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):