https://htmx.org logo
Join Discord
Powered by
can anyone tell me why the `hx-trigger=keyup` over...
# htmx-general
g
can anyone tell me why the 
hx-trigger=keyup
override on the 
#id_search
field at the bottom is not working? it's still inheriting the 
change
trigger from the parent form
Copy code
html
<form hx-get="/explore" hx-target="#form-and-table" hx-trigger="change" id="filter-form" method="post" name="filter-form">

  <div id="div_id_location" class="mb-3">

    <label for="id_location" class="form-label">Location</label> 
    <select name="location" class="select form-select" id="id_location">
      <option value="">
        All
      </option>

    </select>
  </div>

  <div id="div_id_categories" class="mb-3">

    <label for="id_categories" class="form-label">Categories</label> 
    <select name="categories" class="selectmultiple form-select" id="id_categories" multiple>
      <option value="1">
        Hello World
      </option>
    </select>

  </div>

  <div id="div_id_search" class="form-floating mb-3">
    <input type="text" name="search" hx-trigger="keyup" class="textinput textInput form-control" placeholder="search" id="id_search"> <label for="id_search">Search</label>
  </div>

</form>
im really struggling with hx attribute inheritance here... i was able to get the 
keyup
trigger working by duplicating the 
hx-get
down onto the search box, but now I'm noticing that the search box is triggering on BOTH the 
change
(from the parent) and the local 
keyup
trigger... shouldn't 
keyup
completely override 
change
?
this means that it filters correctly as people type into the box, but then it triggers another filter when i focus-out (due to the value changing on focus out)
i also tried using 
hx-disinherit="hx-trigger"
-- to no avail
im able to fix this by replicating ALL of the hx attributes individually onto each select/input... but it would be nice if i could just inherit most of them down -- isnt that the design intent?
m
hx-get and hx-trigger are not inherited, but hx-target should be
I'll recreate this on codepen, one sec
OK
So you need to move both hx-get and hx-trigger onto the input
in the case of the selects, it isn't the select making the request, it's the form
which is catching the 
change
event, which is bubbling up the DOM via event bubbling
so those selects aren't inheriting the hx-get and hx-trigger, rather the change event is bubbling up to the form
hx-get/post/etc. are NOT inherited
nor is hx-trigger
at the bottom of every attribute page we document if it is inherited or not
g
whelp that serves me right for not scrolling all the way to the bottom and seeing the very clear disclaimers about inheritance 😂
i hadnt realized only some things inherit -- that makes all of this much more clear, thanks
m
roger roger, no problem
inheritance (and, now that I think about it, event bubbling) are a somewhat subtle part of htmx unfortunately 😑
PreviousNext
Powered by