replacing the options of a <select> via innerHTML does not display the <option selected> as selected.

[cs224]

Possible Issue: Using hx-swap-oob="innerHTML" on a <select> element ignores the selected attribute, while hx-swap-oob="outerHTML" respects it.

---

Summary

When replacing the options of a <select> using HTMX’s out-of-band swaps:

• outerHTML version works as expected: the <option selected> appears selected in the browser.
• innerHTML version ignores the selected attribute, causing the last <option> to be selected instead.

I’ve added debug JavaScript that reveals the DOM selected property is always set to false for the newly swapped <option> elements when using innerHTML.

I do have a workaround by switching to hx-swap-oob="outerHTML", but would prefer using innerHTML if at all possible. Any hints or solutions for this would be greatly appreciated.

---

Minimal Reproduction

At the very bottom, below, are two minimal FastHTML examples, but the underlying issue likely belongs to how HTMX handles innerHTML swaps on <select>:

Observations / Debug

• When using outerHTML, the newly introduced selected attribute immediately becomes .selected = true in the DOM.
• When using innerHTML, the browser’s final DOM ends with .selected = false for that <option>, and the last <option> ends up selected.
• Console logs from htmx.logAll() plus htmx:afterSwap show the correct HTML snippet arriving, but the actual <select> element in the final DOM is ignoring the selected attribute.

---

Questions / Request

• Is there a known workaround for preserving selected with hx-swap-oob="innerHTML"?
• Why might the <option> be reset in this scenario?

I’d appreciate any insight or suggestions for a fix or alternative approach—thanks in advance!

app_inner.py:

from fasthtml.common import *

app, rt = fast_app()

@rt("/")
def home():
    # Add debugging script for HTMX
    # This snippet logs all HTMX events and prints beforeSwap/afterSwap details.
    debug_script = Script("""
      htmx.logAll(); // log every HTMX event
      document.body.addEventListener('htmx:beforeSwap', (ev) => {
        console.log("[Debug: beforeSwap]", ev.detail);
      });
      document.body.addEventListener('htmx:afterSwap', (ev) => {
        console.log("[Debug: afterSwap]", ev.detail);
      });
    """)

    select_box = Select(
        Option("A", value="A"),
        Option("B", value="B", selected=True),
        id="fullModelsList"
    )
    button = Button(
        "Perform OOB swap (innerHTML)",
        hx_get="/swap",
        hx_target="this",
        hx_swap="none"
    )
    return Titled("Test InnerHTML", select_box, button, debug_script)

@rt("/swap")
def swap():
    snippet = """
    <select id="fullModelsList" hx-swap-oob="innerHTML">
      <option value="X" selected>Option X (should be selected)</option>
      <option value="Y">Option Y</option>
      <option value="Z">Option Z</option>
    </select>
    """
    return HTMLResponse(snippet)

if __name__ == "__main__":
    serve()

app_outer.py:

from fasthtml.common import *

app, rt = fast_app()

@rt("/")
def home():
    # Add debugging script for HTMX
    # This snippet logs all HTMX events and prints beforeSwap/afterSwap details.
    debug_script = Script("""
      htmx.logAll(); // log every HTMX event
      document.body.addEventListener('htmx:beforeSwap', (ev) => {
        console.log("[Debug: beforeSwap]", ev.detail);
      });
      document.body.addEventListener('htmx:afterSwap', (ev) => {
        console.log("[Debug: afterSwap]", ev.detail);
      });
    """)

    select_box = Select(
        Option("A", value="A"),
        Option("B", value="B", selected=True),
        id="fullModelsList"
    )
    button = Button(
        "Perform OOB swap (outerHTML)",
        hx_get="/swap",
        hx_target="this",
        hx_swap="none"
    )
    return Titled("Test OuterHTML", select_box, button, debug_script)

@rt("/swap")
def swap():
    snippet = """
    <select id="fullModelsList" hx-swap-oob="outerHTML">
      <option value="X" selected>Option X (should be selected)</option>
      <option value="Y">Option Y</option>
      <option value="Z">Option Z</option>
    </select>
    """
    return HTMLResponse(snippet)

if __name__ == "__main__":
    serve()