bigskysoftware / bigskysoftware/htmx

Method htmx.process doesn't work with already initialized elements

Open
#3,231 5 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
49.4k
Forks
1.7k
Avg merge
3d 22h
Merged PRs (30d)
30

Description

On the following conversation that I had with [myself](https://github.com/bigskysoftware/htmx/discussions/3225) (so based), I found out that the method `htmx.process` doesn't not process already initialized elements.

I will demonstrate that use case below:

In the following `example.html`, everything will work as expected.

```html

```

But if we use `document.querySelector('#otp').remove()` to remove the input element, then the form becomes:

```html

```

So later, if we decide that we want to add again the input, the form becomes:

```html

```

The docs say: `If javascript adds content to the DOM that has htmx attributes on it, you need to make sure that this content is initialized with the htmx.process() function.`

As we can see, the new added input, does not have any htmx attribute but the form has `hx-trigger="input from:#otp"`.

So if we try to `htmx.process(document.querySelector('form'))` it won't work.

Two things could happen, the `htmx-internal-data.listenerInfos` already contains an old reference to the old `otp` input, so it won't initialize it again or the form element already has initialized it's `htmx-internal-data`, so it will skip the initialization.

If I delete the `htmx-internal-data` and call the `process` function it will work.

Deleting `htmx-internal-data` is too hacky and I don't know the side effects of that.

Maybe we need to change how `htmx.process` works to be aware of such cases or add a second param `htmx.process(element, force = true)` which will take care of such cases.

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.