Handle not preventing link when inside htmx enabled element #3396
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Problem:
Since v2.0.5 (#3336), links inside htmx-enabled elements were incorrectly having their navigation blocked. This broke expected behavior where links should work normally even when placed inside clickable htmx containers.
Before (broken):
Clicking the link would prevent navigation and only trigger the htmx request.
After (fixed):
Links inside htmx containers now navigate normally, preserving the pre-2.0.5 behavior users expect.
Technical change:
Re wrote shouldCancel to make it easier to understand and logical and split submit from click event handling based on suggestion from @1cg. Found that the core of the issue is the from: trigger handling added in #3336 and there is a more reliable simpler way to handle this by just passing eltToListenOn instead of elt to shouldCancel we no longer need to do evt.target lookup inside the function and can instead retain sensible logic in shouldCancel but for users using from: it now handles these situations without changing behaviour for normal triggers. Most of the time eltToListenOn is just elt anyway and when its not we need to use this custom elt as the element to locate the wrapping link or button that needs to be canceled.
Note that shouldCancel before was handling click events on forms and preventing them before and this change now only cancels submit events on forms which makes more sense as forms do not trigger on click events on links and form submit buttons do. This means some of the submitCancel tests needed to be revised and a regression test needed updating.
Backward compatibility:
Restores the previous behavior where links work as expected
Notes:
In the ideal situation links like this could be handled by htmx allowing better progressive enhancement options and this change would not be required but this could be a change in expected behavior. We could also consider rolling back #3336 as an alternative solution.
Corresponding issue:
#3395
Testing
Added shouldCancel test and expanded from: regression tests.
Checklist
master
for website changes,dev
forsource changes)
approved via an issue
npm run test
) and verified that it succeeded