Handle array-like objects when working with checkboxes

Author: Lustmored

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;

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));
                 }
             }
 

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', () => {