[LiveComponent] Fix expanded choices and checkboxes in forms

src/LiveComponent/assets/dist/live_controller.js

@@ -898,14 +898,23 @@ function combineSpacedArray(parts) {
     return finalParts;
 }
 
-function setDeepData(data, propertyPath, value) {
+function parseDeepData(data, propertyPath) {
     const finalData = JSON.parse(JSON.stringify(data));
     let currentLevelData = finalData;
     const parts = propertyPath.split('.');
     for (let i = 0; i < parts.length - 1; i++) {
         currentLevelData = currentLevelData[parts[i]];
     }
     const finalKey = parts[parts.length - 1];
+    return {
+        currentLevelData,
+        finalData,
+        finalKey,
+        parts
+    };
+}
+function setDeepData(data, propertyPath, value) {
+    const { currentLevelData, finalData, finalKey, parts } = parseDeepData(data, propertyPath);
     if (typeof currentLevelData !== 'object') {
         const lastPart = parts.pop();
         throw new Error(`Cannot set data-model="${propertyPath}". The parent "${parts.join('.')}" data does not appear to be an object (it's "${currentLevelData}"). Did you forget to add exposed={"${lastPart}"} to its LiveProp?`);
@@ -928,10 +937,12 @@ function doesDeepPropertyExist(data, propertyPath) {
 }
 function normalizeModelName(model) {
     return model
+        .replace(/\[]$/, '')
         .split('[')
         .map(function (s) {
         return s.replace(']', '');
-    }).join('.');
+    })
+        .join('.');
 }
 
 function haveRenderedValuesChanged(originalDataJson, currentDataJson, newDataJson) {
@@ -979,6 +990,29 @@ function cloneHTMLElement(element) {
     return newElement;
 }
 
+function getArrayValue(element, value, currentValue) {
+    if (!(currentValue instanceof Array)) {
+        currentValue = [];
+    }
+    if (element instanceof HTMLInputElement && element.type === 'checkbox') {
+        const index = currentValue.indexOf(value);
+        if (element.checked) {
+            if (index === -1) {
+                currentValue.push(value);
+            }
+        }
+        else {
+            if (index > -1) {
+                currentValue.splice(index, 1);
+            }
+        }
+    }
+    else if (element instanceof HTMLSelectElement) {
+        currentValue = Array.from(element.selectedOptions).map(el => el.value);
+    }
+    return currentValue;
+}
+
 const DEFAULT_DEBOUNCE = 150;
 class default_1 extends Controller {
     constructor() {
@@ -1022,12 +1056,10 @@ class default_1 extends Controller {
         window.removeEventListener('beforeunload', this.markAsWindowUnloaded);
     }
     update(event) {
-        const value = this._getValueFromElement(event.target);
-        this._updateModelFromElement(event.target, value, true);
+        this._updateModelFromElement(event.target, this._getValueFromElement(event.target), true);
     }
     updateDefer(event) {
-        const value = this._getValueFromElement(event.target);
-        this._updateModelFromElement(event.target, value, false);
+        this._updateModelFromElement(event.target, this._getValueFromElement(event.target), false);
     }
     action(event) {
         const rawAction = event.currentTarget.dataset.actionName;
@@ -1085,7 +1117,17 @@ class default_1 extends Controller {
             const clonedElement = cloneHTMLElement(element);
             throw new Error(`The update() method could not be called for "${clonedElement.outerHTML}": the element must either have a "data-model" or "name" attribute set to the model name.`);
         }
-        this.$updateModel(model, value, shouldRender, element.hasAttribute('name') ? element.getAttribute('name') : null);
+        if (/\[]$/.test(model)) {
+            const { currentLevelData, finalKey } = parseDeepData(this.dataValue, normalizeModelName(model));
+            const currentValue = currentLevelData[finalKey];
+            value = getArrayValue(element, value, currentValue);
+        }
+        else if (element instanceof HTMLInputElement
+            && element.type === 'checkbox'
+            && !element.checked) {
+            value = null;
+        }
+        this.$updateModel(model, value, shouldRender, element.hasAttribute('name') ? element.getAttribute('name') : null, {});
     }
     $updateModel(model, value, shouldRender = true, extraModelName = null, options = {}) {
         const directives = parseDirectives(model);
@@ -1109,7 +1151,7 @@ class default_1 extends Controller {
             this._dispatchEvent('live:update-model', {
                 modelName,
                 extraModelName: normalizedExtraModelName,
-                value,
+                value
             });
         }
         this.dataValue = setDeepData(this.dataValue, modelName, value);

src/LiveComponent/assets/src/get_array_value.ts

@@ -0,0 +1,39 @@
+/**
+ * Resolve multiple value data from changed HTML element.
+ *
+ * @param element       Current HTML element
+ * @param value         Resolved value of a single HTML element (.value or [data-value])
+ * @param currentValue  Current data value
+ */
+export function getArrayValue(
+    element: HTMLElement,
+    value: string|null,
+    currentValue: any
+): Array<string> {
+    // Enforce returned value is an array
+    if (!(currentValue instanceof Array)) {
+        currentValue = [];
+    }
+
+    if (element instanceof HTMLInputElement && element.type === 'checkbox') {
+        const index = currentValue.indexOf(value);
+
+        if (element.checked) {
+            // Add value to an array if it's not in it already
+            if (index === -1) {
+                currentValue.push(value);
+            }
+        } else {
+            // Remove value from an array
+            if (index > -1) {
+                currentValue.splice(index, 1);
+            }
+        }
+    } else if (element instanceof HTMLSelectElement) {
+        // Select elements with `multiple` option require mapping chosen options to their values
+        currentValue = Array.from(element.selectedOptions).map(el => el.value);
+    }
+
+    // When no values are selected for collection no data should be sent over the wire
+    return currentValue;
+}

src/LiveComponent/assets/src/live_controller.ts

@@ -2,10 +2,11 @@ import { Controller } from '@hotwired/stimulus';
 import morphdom from 'morphdom';
 import { parseDirectives, Directive } from './directives_parser';
 import { combineSpacedArray } from './string_utils';
-import { setDeepData, doesDeepPropertyExist, normalizeModelName } from './set_deep_data';
+import {setDeepData, doesDeepPropertyExist, normalizeModelName, parseDeepData} from './set_deep_data';
 import { haveRenderedValuesChanged } from './have_rendered_values_changed';
 import { normalizeAttributesForComparison } from './normalize_attributes_for_comparison';
 import { cloneHTMLElement } from './clone_html_element';
+import {getArrayValue} from "./get_array_value";
 
 interface ElementLoadingDirectives {
     element: HTMLElement,
@@ -105,15 +106,11 @@ export default class extends Controller {
      * Called to update one piece of the model
      */
     update(event: any) {
-        const value = this._getValueFromElement(event.target);
-
-        this._updateModelFromElement(event.target, value, true);
+        this._updateModelFromElement(event.target, this._getValueFromElement(event.target), true);
     }
 
     updateDefer(event: any) {
-        const value = this._getValueFromElement(event.target);
-
-        this._updateModelFromElement(event.target, value, false);
+        this._updateModelFromElement(event.target, this._getValueFromElement(event.target), false);
     }
 
     action(event: any) {
@@ -194,7 +191,7 @@ export default class extends Controller {
         return element.dataset.value || (element as any).value;
     }
 
-    _updateModelFromElement(element: HTMLElement, value: string, shouldRender: boolean) {
+    _updateModelFromElement(element: HTMLElement, value: string|null, shouldRender: boolean) {
         const model = element.dataset.model || element.getAttribute('name');
 
         if (!model) {
@@ -203,7 +200,25 @@ export default class extends Controller {
             throw new Error(`The update() method could not be called for "${clonedElement.outerHTML}": the element must either have a "data-model" or "name" attribute set to the model name.`);
         }
 
-        this.$updateModel(model, value, shouldRender, element.hasAttribute('name') ? element.getAttribute('name') : null);
+        // HTML form elements with name ending with [] require array as data
+        // we need to handle addition and removal of values from it to send
+        // back only required data
+        if (/\[]$/.test(model)) {
+            // Get current value from data
+            const {currentLevelData, finalKey} = parseDeepData(this.dataValue, normalizeModelName(model))
+            const currentValue = currentLevelData[finalKey];
+
+            value = getArrayValue(element, value, currentValue);
+        } else if (
+            element instanceof HTMLInputElement
+            && element.type === 'checkbox'
+            && !element.checked
+        ) {
+            // Unchecked checkboxes in a single value scenarios should map to `null`
+            value = null;
+        }
+
+        this.$updateModel(model, value, shouldRender, element.hasAttribute('name') ? element.getAttribute('name') : null, {});
     }
 
     /**
@@ -253,7 +268,7 @@ export default class extends Controller {
             this._dispatchEvent('live:update-model', {
                 modelName,
                 extraModelName: normalizedExtraModelName,
-                value,
+                value
             });
         }
 

src/LiveComponent/assets/src/set_deep_data.ts

@@ -1,6 +1,5 @@
 // post.user.username
-export function setDeepData(data, propertyPath, value) {
-    // cheap way to deep clone simple data
+export function parseDeepData(data, propertyPath) {
     const finalData = JSON.parse(JSON.stringify(data));
 
     let currentLevelData = finalData;
@@ -14,6 +13,18 @@ export function setDeepData(data, propertyPath, value) {
     // now finally change the key on that deeper object
     const finalKey = parts[parts.length - 1];
 
+    return {
+        currentLevelData,
+        finalData,
+        finalKey,
+        parts
+    }
+}
+
+// post.user.username
+export function setDeepData(data, propertyPath, value) {
+    const {currentLevelData, finalData, finalKey, parts} = parseDeepData(data, propertyPath)
+
     // make sure the currentLevelData is an object, not a scalar
     // if it is, it means the initial data didn't know that sub-properties
     // could be exposed. Or, you're just trying to set some deep
@@ -64,9 +75,14 @@ export function doesDeepPropertyExist(data, propertyPath) {
  */
 export function normalizeModelName(model) {
     return model
+        // Names ending in "[]" represent arrays in HTML.
+        // To get normalized name we need to ignore this part.
+        // For example: "user[mailing][]" becomes "user.mailing" (and has array typed value)
+        .replace(/\[]$/, '')
         .split('[')
         // ['object', 'foo', 'bar', 'ya']
         .map(function (s) {
             return s.replace(']', '')
-        }).join('.')
+        })
+        .join('.')
 }