https://htmx.org logo
Powered by
# htmx-general
  • h
  • m
    😑
  • g
    Yes, that’s frustrating. I bet there’s a quick fix for this in CSS
  • g
    I’ve also made an accessibility plugin for htmx that populates a few standard attributes for me automatically. I’ll need to publish in a nicer format.
  • g
  • g
    I’d love to get your feedback and suggestions in it.
  • e
    > HN: one of the last remaining Great Good Places of the Internet, a lone tavern in an iconic gateway town to the now not-so-wild west. 💀
  • h
    lol I read that
  • h
    that was.... an interesting comment
  • m
    \> mfw
  • c
    I stay away from all things 'npm' like the plague, but I have to say that Storybook looks like a really useful tool for ui/component development and could work well for people using htmx. seems like they also have an automated accessibility testing feature/plugin https://storybook.js.org/blog/automate-accessibility-tests-with-storybook/
  • l
    thanks
  • s
    Any recommendations on an htmx compatible autocomplete component? I noticed @gorgeous-ghost-95789 's hyperscript combobox but didn't notice if it would filter down as you typed.
  • s
    I want to do something like the 'active search' example, but in an accessible autocomplete
  • s
    It seems possible to sprinkle some htmx with that widget to get that effect:
    Copy code
    html
<input
    type="text"
    name="search"
    value="Work"
    hx-get="/search"
    hx-trigger="keyup[key!='Enter'] changed delay:50ms"
    hx-target="#combo_results"
>
<div class="open-button"><span style="transform:rotate(180deg) translateY(-2px); display:inline-block;">â–³</span></div>
<div role="menu" hidden="true" id="combo_results"></div>
    Add an event listener to the behaviour to show the menu:
    Copy code
    -- -------------------------
    -- INPUT EVENTS
    -- -------------------------

    on htmx:afterSettle from <div/> in me
        call showMenu()
    Your endpoint 
    /search
    should then respond with:
    Copy code
    <div role="menuitem">Result #1</div>
  • k
    is there a way to not target htmx hx-post so that it works just like a regular form post?
  • k
    i want to add hx-include to a form
  • r
    Really cool take on this.
  • m
    Oh cool, I was just about to create a similar component! I need something slightly different though, I guess a mix between a select and a datalist
  • f
  • m
    Mm what's the correct syntax for 
    hx-trigger="change[:not([someattr])]
    ?
  • m
    Copy code
    change[!target.hasAttribute("someattr")]
  • m
    thank you!
  • m
    I was wondering if there were a way to use 
    hx-trigger
    with custom functions instead of ajax requests.
  • p
    question re . Suppose I want to add HTMX navigation using e.g.
  • p
    Copy code
    <select hx-trigger="change" hx-target="..">
   <option hx-get="/url/1">Option A</option>
   <option hx-get="/url/2">Option A</option>
</select>
  • p
    this appears to work in Firefox, but not Chrome i.e. if I select option A htmx fetches /url/1/
  • p
    is there a better cross-browser pattern for this, short of using the htmx API?
  • m
    unfortunately events on ``'s are not fired consistently across browsers. You could move the hx-get up to the select, but then you can't have more than one URL and you have to use parameters and a redirect to get it to "look right". Another kinda janky way would be to catch the change event on the select with hyperscript or alpine and send it back to the option as a custom event: https://codepen.io/1cg/pen/NWygaQw?editors=1000
    Copy code
    html
<select hx-target="#output"
        _="on change 
             set selectedOption to my options[my selectedIndex]
             send 'option-changed' to the selectedOption">
  <option></option>
  <option hx-trigger="option-changed" hx-get="/foo">Get Foo</option>
  <option hx-trigger="option-changed" hx-get="/bar">Get Bar</option>  
</select>
  • m
    note that you need to put hx-trigger on each option because that attribute is not inherited
1...685686687...1146Latest