bigskysoftware / bigskysoftware/htmx

HTMX raises error when passing null value in hx-vals

Open
#2,884 7 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
49.4k
Forks
1.7k
Avg merge
3d 22h
Merged PRs (30d)
30

Description

HTMX currently throws an error when a null value is passed in the hx-vals attribute due to improper handling of null values.

https://github.com/bigskysoftware/htmx/blob/326ff3b296cf5e3eb0ec7799a9f607818776628c/src/htmx.js#L3965

The issue arises because the existing logic checks for the forEach method without verifying if the object itself is non-null, leading to an exception when null values are encountered.

**Steps to Reproduce:**
1. Create an element using `hx-vals` with a null value, for example:
```html


```
2. Trigger the POST request (e.g., by clicking the element).
3. Observe the error in the console due to improper handling of the null value.

**Expected Behavior:**
HTMX should handle null values gracefully without raising an error, and the form data should be constructed correctly.

**Proposed Fix:**
1. Update the condition in `htmx.js` to ensure the object is non-null before attempting to invoke the `forEach` method.
- Example change:
```javascript
if (obj[key] && typeof obj[key].forEach === 'function') {
```
2. Add a unit test to validate that null values in `hx-vals` do not cause errors and are correctly handled.

Related PR: https://github.com/bigskysoftware/htmx/pull/2883

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.