https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • m
    The edit input also has several events attached to it
    Copy code
    <input id="edit-1" x-on:keydown.enter="if($event.target.value !== '') $event.target.blur()" x-on:edit="focus($event.target.id)" class="edit" name="task" value="one" hx-post="save" hx-trigger="blur" hx-vars="id:1">
  • m
    The 
    edit
    event is triggered server-side using HX-Trigger so I can use that to run the 
    focus
    function on the right input. This can be further simplified because the input doesn't need to be rendered for every task.
  • m
    If you see any opportunities to simplify the way the 
    hx
    attributes are used, let me know!
  • l
    Well, it seems to work.
  • m
    I think on the second one you could say 
    hx-trigger='blur changed'
    maybe?
  • m
    hmmm
  • m
    I wonder if we can extend this to handle general matching in the trigger handler
  • m
    e.g.
  • m
    blur changed doesn't work because the then the page doesn't update and it remains in "edit" state.
  • m
    oh, it's only the enter key
  • m
    yeah, let me think
  • m
    i think the trigger syntax can be updated to help with this stuff, just thinking it through
  • m
    Alpine JS has these modifiers for the keydown event which let you listen for specific keys or key combinations (COMMAND-ENTER). Would be nice to have this natively. But even then, it should be possible to prevent a double request with "enter blur". And I am not sure how to deal with the focus thing without extra js.
  • m
    hx-trigger="keydown(key:'enter') condition:value!=''"
  • m
    yeah, the blur logic is pure client side stuff, so that would need to be hyperscript
  • m
    what is the focus doing?
  • m
    when you double click a task, it shows the input to edit it and automatically adds the focus at the end of the value.
  • m
    how is the edit event triggered?
  • m
    more alpine?
  • m
    server side
  • m
    I listen for it with Alpine
  • m
    there is a dblclickk event it looks like
  • m
    It's this 
    x-on:edit="focus($event.target.id)"
  • m
    that could be used to pull down the edit UI for the item
  • m
    Yes, double click sends an edit request. I show the edit input and send an HX-Trigger = 'edit' and listen to that to do the focus.
  • m
    autofocus
    would work I think
  • m
    I tried it, but it puts the cursor at the beginning
  • m
    ahhhh
  • m
    we should put the cursor at the end for sure, that's a bug
  • m
    i mean, that's apparently the default behavior, but htmx should fix that
1...454647...1146Latest