bigskysoftware / bigskysoftware/idiomorph
Idiomorph explicitly set swap strategy is overridden by inherited htmx swap, and disinheriting does not change the behavior.
- Dominant language
- HTML
- Stars
- 1.1k
- Forks
- 57
- Avg merge
- 9h 58m
- Merged PRs (30d)
- 4
Description
This is a change validation feature where a debounced input change issues a request. The intent is to morph the changed field with a validation error if invalid. I did work around this by changing the var source to be 'my-div' and moving the div inside the form. I think the issue is that htmx.ajax was using the form as the source and the swap strategy was locked-in. Explicitly setting idiomorph to swap outerHTML has no effect, it still applies the form swap strategy. I'm not sure if this is an idiomorph or htmx bug, or combination. As I mentioned, I was able to design my way around it, but wanted to report it just in case. P.S. I love htmx and idiomorph! Quality libraries and much appreciated! Thank you!
[Here](https://github.com/ranzlee/razorx/commit/62e5c7679b34c4d08c535b9e744b5c2aa86170d8) is the commit of the work-around, if it helps.
versions:
htmx: 2.0.4
idiomorph: 0.7.3
```
(function() {
var validate = function(evt) {
evt.stopPropagation();
if (!evt.srcElement.hasAttribute("data-validate-on-change")) {
return;
}
var dataId = evt.srcElement.getAttribute("data-id");
var source = document.getElementById('my-form');
htmx.ajax('POST', '/validation-route', {
select: `#${dataId}`,
target: `#${dataId}`,
swap: "morph:{morphStyle:'outerHTML', ignoreActiveValue:true}",
source: source
}).then(() => {
var evt = new Event('validationChange');
var ele = document.getElementById(dataId);
ele?.dispatchEvent(evt);
});
}
var debounce = function() {
var timer;
return function(evt) {
clearTimeout(timer);
timer = setTimeout(() => {
validate(evt);
}, 600);
}
}
document.getElementById('my-div').oninput = debounce();
})()
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.