bigskysoftware / bigskysoftware/htmx
Method htmx.process doesn't work with already initialized elements
- 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
Assessment
This issue has not been assessed yet.