https://htmx.org logo
Powered by
# htmx-general
  • g
    it applies a trailing debounce to an event
  • h
    I am unable to recreate that bug I talked about the other day w/ getting duplicate fragments when hitting the back button
  • h
    But I would love some guidance on how to get the effect I want w/ moving backwards in history
  • h
    I put up a stupid tester app at https://animelister.fly.dev/ with 200 items in the db, paginated by 20 items at a time, if you scroll through a couple buckets and get to item 100 or something
  • h
    click through the detail link
  • h
    and hit back, the intent would be that the restored html/position would match where they were before
  • h
    but instead I'm seeing the browser use only the initial load (1-20) but attempt to restore position at item 100
  • h
    so it immediately fires the event to load page 2, and the final effect is that the page restore at position 20 with items 1-40 loaded
  • t
    seems to work here. I hit back and it comes back at the same position
  • h
    @User wtf what you're seeing is exactly what I'd expect
  • t
    firefox 88.0 linux
  • h
    hm I'm on brave V1.31.87 linux, let me try in FF
  • h
    works perfectly on FF
  • l
    I'm having trouble understanding what's going on with this issue. I've created an autocomplete control using htmx and it works great except for one issue. If I type some text my suggestions appear - but I want a way to cancel out of that and have my text go away as well as the suggestions. I'm using this javascript to make that happen.
    Copy code
    htmx.on('htmx:afterSettle', function(evt) {
        let search_field = htmx.find('#[[=tablename]]_[[=fieldname]]_search');
        if (search_field !== null) {
            // add event listener to see if user gets out of the autocomplete - if so, remove the dropdown and clear values
            search_field.addEventListener('focusout', (event) => {
                if (event.relatedTarget == null) {
                    htmx.remove(htmx.find('#[[=tablename]]_[[=fieldname]]_autocomplete_table'));
                    let input_field = htmx.find('input#[[=tablename]]_[[=fieldname]]');
                    if (input_field != null) {
                        input_field.value = null;
                    }
                    search_field.value = null;
                } else {
                    if (event.relatedTarget.id !== '[[=tablename]]_[[=fieldname]]_autocomplete_table' && (!event.relatedTarget.classList.contains('select_option'))) {
                        if (htmx.find('#[[=tablename]]_[[=fieldname]]_autocomplete_table') !== null) {
                            htmx.remove(htmx.find('#[[=tablename]]_[[=fieldname]]_autocomplete_table'));
                        }
                    }
                }
                event.preventDefault();
            });
        }
});
  • l
    It works the first time I click out of the input box, but fails if I re-enter data and then click out again.
  • l
    Here is a quick video of it happening
  • l
    Any ideas what I'm doing wrong?
  • l
    javascript error messages
  • h
    is it because you're calling afterSettle both times the data is loaded so you have two event listeners?
  • l
    Previously I had code in there to test to see if the listener was already there, but it didn't seem to make a difference. Hang on, I'll grab the code I was using....
  • l
    Copy code
    htmx.on('htmx:afterSettle', function(evt) {
        let search_field = htmx.find('#[[=tablename]]_[[=fieldname]]_search');
        if (search_field !== null) {
            // add event listener to see if user gets out of the autocomplete - if so, remove the dropdown and clear values
            if (typeof search_field.focusout !== 'function') {
                search_field.addEventListener('focusout', (event) => {
                    if (event.relatedTarget == null) {
                        htmx.remove(htmx.find('#[[=tablename]]_[[=fieldname]]_autocomplete_table'));
                        let input_field = htmx.find('input#[[=tablename]]_[[=fieldname]]');
                        if (input_field != null) {
                            input_field.value = null;
                        }
                        search_field.value = null;
                    } else {
                        if (event.relatedTarget.id !== '[[=tablename]]_[[=fieldname]]_autocomplete_table' && (!event.relatedTarget.classList.contains('select_option'))) {
                            if (htmx.find('#[[=tablename]]_[[=fieldname]]_autocomplete_table') !== null) {
                                htmx.remove(htmx.find('#[[=tablename]]_[[=fieldname]]_autocomplete_table'));
                            }
                        }
                    }
                    event.preventDefault();
                });
            }
        }
    });
  • h
    why do you need to set the event listener in the afte settle event?
  • h
    you never actually use evt as far as I can see, can you do the event listener on document ready?
  • l
    I don't know, I'm not a skilled js person. At first I had this on htmx:load and it didn't work either. Same kind of issues.
  • l
    This piece of html and the script in it is loaded by htmx. I didn't think the document ready was triggered when it was loaded by htmx and that I needed to use the htmx: events.
  • h
    if the search form control is htmx-ed in then it would make sense to use an htmx event to set it, yeah
  • l
    So, does this js effectively check to see if the listener is already registered? 
    if (typeof search_field.focusout !== 'function') {
  • h
    I'm not sure 😓
  • h
    my js foo isn't strong enough to know that w/o testing
  • h
    I would set a global like window.has_set_focusout
1...413414415...1146Latest