diff --git a/src/LiveComponent/assets/dist/live_controller.js b/src/LiveComponent/assets/dist/live_controller.js index 5fec5b585c9..38af12a6208 100644 --- a/src/LiveComponent/assets/dist/live_controller.js +++ b/src/LiveComponent/assets/dist/live_controller.js @@ -162,6 +162,9 @@ function getValueFromElement(element, valueStore) { if (Array.isArray(modelValue)) { return getMultipleCheckboxValue(element, modelValue); } + else if (Object(modelValue) === modelValue) { + return getMultipleCheckboxValue(element, Object.values(modelValue)); + } } if (element.hasAttribute('value')) { return element.checked ? element.getAttribute('value') : null; diff --git a/src/LiveComponent/assets/src/dom_utils.ts b/src/LiveComponent/assets/src/dom_utils.ts index f4994aa441f..310692e3a3c 100644 --- a/src/LiveComponent/assets/src/dom_utils.ts +++ b/src/LiveComponent/assets/src/dom_utils.ts @@ -20,6 +20,10 @@ export function getValueFromElement(element: HTMLElement, valueStore: ValueStore const modelValue = valueStore.get(modelNameData.action); if (Array.isArray(modelValue)) { return getMultipleCheckboxValue(element, modelValue); + } else if (Object(modelValue) === modelValue) { + // we might get objects of values from forms, like {'1': 'foo', '2': 'bar'} + // this occurs in symfony forms with expanded ChoiceType when first checked options get unchecked + return getMultipleCheckboxValue(element, Object.values(modelValue)); } } diff --git a/src/LiveComponent/assets/test/dom_utils.test.ts b/src/LiveComponent/assets/test/dom_utils.test.ts index c47f3121bcb..42ad09a2e9e 100644 --- a/src/LiveComponent/assets/test/dom_utils.test.ts +++ b/src/LiveComponent/assets/test/dom_utils.test.ts @@ -32,6 +32,9 @@ describe('getValueFromElement', () => { expect(getValueFromElement(input, createStore({ foo: ['bar'] }))) .toEqual(['bar', 'the_checkbox_value']); + + expect(getValueFromElement(input, createStore({ foo: {'1': 'bar'} }))) + .toEqual(['bar', 'the_checkbox_value']); }); it('Correctly removes data from valued unchecked checkbox', () => { @@ -50,6 +53,8 @@ describe('getValueFromElement', () => { .toEqual(['bar']); expect(getValueFromElement(input, createStore({ foo: ['bar', 'the_checkbox_value'] }))) .toEqual(['bar']); + expect(getValueFromElement(input, createStore({ foo: {'1': 'bar', '2': 'the_checkbox_value'} }))) + .toEqual(['bar']); }); it('Correctly handles boolean checkbox', () => {