Component response with oob is not respected

[Christian González]

Maybe I have some misconfig, but it seems that a hx-swap-oob is not respected in a component.

I have a component with a search input field, that is rendered from a parent template. The parent template contains a <div id="patient-search-result"> tag which is empty.

The response looks like (simplified):

{% load tz i18n htmx %}
<div {% hx-tag %}>
  <form>
    <div class="input-group input-group-sm mb-3">
      <input {% on 'search_patient' %} type="text" class="form-control"  autofocus>
      <button
          class="btn btn-primary" id="patient-search-button"
          {% on 'search_patient' %}>Search</button>
    </div>
  </form>
</div>


    {# this should be swapped into the #patient-search-result div #}
<div id="patient-search-results" hx-swap-oob="true">
{% for patient in patient_list %}
      <strong>{{ patient.names.first.last_name | upper }}</strong>,
      {{ patient.names.first.first_name }}
{% endfor %}
</div>

The second div is on the top level of the response, as requested by htmx:

Note that out of band elements must be in the top level of the response, and not children of the top level elements.

But it is not loaded into that div#patient-search-result, but directly after the first div, like in the response.

I looked at the code, and saw that the context "could" have a hx_swap_oob key - but this is not documented and I don't know what to do.
Is this a bug, or just me not knowing what to do here?

[Eddy Ernesto del Valle Pino]

Can you show me the response you get from the serer when you press the button?

[Christian González]

Looks normal: HTTP POST /__htmx/PatientSearchInput/search_patient 200 [0.11, 127.0.0.1:46476]

[Christian González]

AH, think I got it. It is another error. Whin I click the button, everything woks as intended. When I press [Enter] in the input field, the form submits automatically too, and then the error occurs, maybe because it's submitted twice somehow. Have to think about a .prevent-default or similar.
I think we can close this issue. Definitely not related to djhtmx.

[Christian González]

FYI: I had an `{% on 'search_patients' %} on both the input field and the button. So it fired twice, and this seemed to trigger a race condition.

[Christian González]

I have to reopen this, as the original issue is not gone... the oob swap is not respected.
This is the view template:

{% extends ...%}
{% load htmx %}

{% block content %} 
...
{% htmx Foo %}
...
<div id="here-to-place-oob">...</div>
{% endblock %}

and this is the component template:

{% load htmx %}
<div {% hx-tag %}>
blah
</div>

<div id="here-to-place-oob" hx-swap-oob="true">New content</div>

This ends up in having 2 #here-to-place-oob tags in the rendered code, even at the first render when opening the page.

How is that done correctly?