Skip to content

fix(v4): append array items individually in __addInputValues for FormData - #3965

Open
AndrewGit25 wants to merge 3 commits into
bigskysoftware:four-devfrom
AndrewGit25:fix/array-value-custom-elements-v4
Open

fix(v4): append array items individually in __addInputValues for FormData#3965
AndrewGit25 wants to merge 3 commits into
bigskysoftware:four-devfrom
AndrewGit25:fix/array-value-custom-elements-v4

Conversation

@AndrewGit25

@AndrewGit25 AndrewGit25 commented Aug 19, 2026

Copy link
Copy Markdown

Description

Resolves an issue where multi-value elements processed manually by HTMX (e.g., via hx-include, non-form containers, or custom web components whose .value property returns an Array) serialize as a single comma-separated string (fruit=banana,apple) instead of individual keys (fruit=banana&fruit=apple).

Context & Root Cause

  • When submitting standard <form> elements, native FormData automatically appends multiple entries for multi-value inputs like <select multiple>.
  • However, when HTMX manually collects values via __addInputValues (such as for hx-include or custom elements outside a form), passing an array to FormData.append(name, input.value) invokes Array.prototype.toString(), coercing the array into a comma-separated string.
  • This PR updates __addInputValues to detect arrays (Array.isArray(input.value)) and append each item individually, bringing manual value collection into parity with native <form> multi-value serialization.

Changes

  • Updated __addInputValues in src/htmx.js to handle Array.isArray(input.value) by iterating over each item and calling formData.append(name, item).
  • Added non-null filtering (if (v != null)) so null or undefined values inside arrays or standalone properties are safely skipped rather than stringified to "null".
  • Added unit tests in test/tests/unit/__collectFormData.js covering array serialization and null-filtering for both form and non-form elements.

Corresponding issue: N/A

Testing

  • Unit test suite for __collectFormData: 37/37 passed.
  • Full automated test suite (npm test): All 87 test files (1,670 tests) passed with 0 failures.
  • Manual test: Verified with a <custom-select> component returning an array .value, successfully producing repeated query parameters matching native <select multiple> behavior.

Checklist

  • I have read the contribution guidelines
  • I have targeted this PR against the correct branch (dev or four-dev)
  • This is a bugfix / parity fix for manual form data extraction
  • I ran the test suite locally (npm run test) and verified that it succeeded

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant