and then check that

as a tester

"set a global"?? I don't know how to do that

window.has_set_focusout = true

Awesome!! Thanks so much for the help. Here is what I did:

if (!window.focus_out_loaded) {
        window.focus_out_loaded = false;
    }
    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 (!window.focus_out_loaded) {
                search_field.addEventListener('focusout', (event) => {
                    window.focus_out_loaded = true;
                    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();
                });
            }
        }
    });

Whoops, one correction. The

window.focus_out_loaded = true;

should be outside the addEventListener.

did that work? or are you still seeing an erro on focus out

All working great. Thanks @User for the help and patience.

🎉 awesome

I ran into another issue today. I've been using version 1.4.1. When troubleshooting my problem today I moved to 1.6.0. In doing some other testing this afternoon I was running into errors with hx-post and the post vars being sent to my webserver. Seems like a bunch got sent in a string instead of a dict (I'm using python on the server side). I reverted to 1.4.1 and it all works fine again.

are you expecting json on the server?

I guess another way to phrase that would be are you taking the incoming data w/ a form or like a drf viewset

No idea. I can pose that question to the devs that parse all of that.

if the answer is "we are expecting json" you can use https://htmx.org/extensions/json-enc/

Did something drastic change between 1.4.1 and 1.6.0 that would affect how we should accept the data?

idk, started htmx too recently to know

Thanks for taking a look, and thanks again for the earlier help. As I said, javascript is not my strength which is why I love this tool!

yeah np

I am having fun exploring this model

things that leverage the browser more tend to be better in the long run imho

one change that might cause this is we respect the

enctype

declaration on forms now: https://github.com/bigskysoftware/htmx/commit/d2c5dd86032b32cf8b117a5842e8f8052fb1caa4

Thanks Carson, will check pass on to the framework devs and see what they say.

no prob, let me know if there is a deeper issue

Or, is the enctype something I can set on my form element?

Never mind, I see that it is... I can make that adjustment.

I just confirmed that we are setting the enctype="multipart/form-data" on all forms in the framework.

...and we have the problem with 1.6.0 but works fine with 1.4.1.

So looking more at this backbutton issue that works in FF but not in chrome

when I hit back in chrome I get a fresh request from the server

and FF doesn't make any more network requests