Fix facet pills replacing body instead of self on HTMX update
All checks were successful
Deploy / deploy (push) Successful in 1m48s
All checks were successful
Deploy / deploy (push) Successful in 1m48s
Add hx_target="this" to the dsl_facet_pills container to prevent HTMX from inheriting hx_target="body" from the parent wrapper. Without this, clicking a facet pill would cause the facet refresh to replace the entire body with just the pills HTML, breaking forms on pages like /actions/outcome. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -71,6 +71,7 @@ def dsl_facet_pills(
|
||||
hx_get=htmx_url,
|
||||
hx_trigger=f"change from:#{filter_input_id} delay:600ms",
|
||||
hx_include=f"#{filter_input_id}",
|
||||
hx_target="this",
|
||||
hx_swap="outerHTML",
|
||||
cls="space-y-3 mb-4",
|
||||
)
|
||||
|
||||
@@ -122,6 +122,42 @@ class TestFacetPillsOnOutcomeForm:
|
||||
filter_input = page.locator("#filter")
|
||||
expect(filter_input).to_have_value("species:duck")
|
||||
|
||||
def test_facet_click_preserves_form_structure(self, page: Page, live_server):
|
||||
"""Clicking a facet pill should not replace the form with just pills.
|
||||
|
||||
Regression test: Without hx_target="this" on the facet pills container,
|
||||
HTMX inherits hx_target="body" from the parent and replaces the entire
|
||||
page body with just the facet pills HTML.
|
||||
"""
|
||||
page.goto(f"{live_server.url}/actions/outcome")
|
||||
expect(page.locator("body")).to_be_visible()
|
||||
|
||||
# Verify form elements are visible before clicking facet
|
||||
outcome_select = page.locator("#outcome")
|
||||
expect(outcome_select).to_be_visible()
|
||||
|
||||
filter_input = page.locator("#filter")
|
||||
expect(filter_input).to_be_visible()
|
||||
|
||||
# Click a facet pill
|
||||
duck_pill = page.locator('[data-facet-field="species"][data-facet-value="duck"]')
|
||||
expect(duck_pill).to_be_visible()
|
||||
duck_pill.click()
|
||||
|
||||
# Wait for HTMX to complete the facet refresh (600ms delay + network time)
|
||||
# The facet pills use hx_trigger="change delay:600ms" so we must wait
|
||||
page.wait_for_timeout(1000)
|
||||
page.wait_for_load_state("networkidle")
|
||||
|
||||
# Form elements should still be visible after facet pills refresh
|
||||
# If this fails, the body was replaced with just the facet pills
|
||||
expect(outcome_select).to_be_visible()
|
||||
expect(filter_input).to_be_visible()
|
||||
|
||||
# Verify the form can still be submitted (submit button visible)
|
||||
submit_button = page.locator('button[type="submit"]')
|
||||
expect(submit_button).to_be_visible()
|
||||
|
||||
|
||||
class TestFacetPillsOnTagAddForm:
|
||||
"""Test facet pills functionality on the tag add form."""
|
||||
|
||||
Reference in New Issue
Block a user