Confusing hx-swap-oob Behavior?

[ed-p-may]

Hi,

I very am new to it, but I really like working in fastHTML so far. At the moment I am having trouble with hx-swap-oob though, and wonder if anyone can advise? I am not sure if this is a bug, or the intended behavior? Given the code:

import fasthtml.common as fhc

app, rt = fhc.fast_app()

@rt("/")
async def get():
    return fhc.Titled(
        "Items",
        fhc.Div("Item 1", id="item-1"),
        fhc.Div("Item 2", id="item-2", hx_swap_oob="true"),  # <---
        fhc.Button(
            "to page 2...",
            type="button",
            hx_get="/page_2",
            hx_target="#main",
        ),
        id="main",
    )

@rt("/page_2")
async def page_2():
    return fhc.Titled(
        "Page 2",
        fhc.Button(
            "back to root...",
            type="button",
            hx_get="/",
            hx_target="#main",
        ),
    )

fhc.serve()

I get the behavior:

so anything with a hx_swap_oop does not get rendered on the second GET / ?

Is that how it is supposed to work? If so, and lets say that I want to keep the swap-oob element because I need to target it elsewhere in my app, how would I resolve the issue in this case?

I'd like it to just render the normal root page when I call it, regardless of the hx-swap-oob elements. Is that possible?

thanks so much for any input or suggestions!

@ed-p-may

[renato145]

What is the purpose of hx_swap_oob here?
This is what I think is happening: when you try to do the 2nd get the hx_swap_oob is trying to find the id item-2, since its not found, it have nowhere to go and is discarded.

[madpower2000]

I have the same issue, but in little more complicated example borrowed from chat demo like this:

from fasthtml.common import *

# Set up the app, including daisyui and tailwind for the chat component
tailwind = Script(src='https://cdn.tailwindcss.com')
daisy = Link(rel="stylesheet", href="https://cdn.jsdelivr.net/npm/daisyui@4.11.1/dist/full.min.css")

app, rt = fast_app(
    live=True,
    debug=True,
    pico=False,
    hdrs=(daisy, tailwind),
    cls="p-4 max-w-lg mx-auto"
)

# Chat message component (renders a chat bubble)
def ChatMessage(msg, user):
    bubble_class = "chat-bubble-primary" if user else 'chat-bubble-secondary'
    chat_class = "chat-end" if user else 'chat-start'
    return Div(cls=f"chat {chat_class}")(
               Div('user' if user else 'assistant', cls="chat-header"),
               Div(msg, cls=f"chat-bubble {bubble_class}"),
               Hidden(msg, name="messages")
           )

# The input field for the user message. 
def ChatInput():
    return Input(name='msg', id='msg-input', placeholder="Type a message",
                 cls="input input-bordered w-full join-item", hx_swap_oob='true')

# The main screen
@app.get('/chat')
def index(request):
    return Form(hx_post=send, hx_target="#chatlist", hx_swap="beforeend")(
                Div(id="chatlist", cls="chat-box h-[73vh] overflow-y-auto"),
                Div(cls="flex space-x-2 mt-2 p-4 join")(
                    ChatInput(), 
                    Button("Send", cls="btn btn-primary join-item")
                )
            )

# Handle the form submission
@app.post('/chat')
def send(msg:str, messages:list[str]=None):
    if not messages: messages = []
    messages.append(msg.rstrip())
    r = "get response from chat model"
    return (ChatMessage(msg, True),    # The user's message
            ChatMessage(r.rstrip(), False), # The chatbot's response
            ChatInput()) # And clear the input field via an OOB swap

@rt('/dashboard')
def get():
    return Div()(
        Span("Profile", cls="text-sm"),
        Div(id="main")(
            Div(cls="flex items-center justify-center h-screen bg-gray-800", )(
                Button("Go to Chat", 
                    cls="btn btn-primary", 
                    hx_get="/chat",  
                    hx_target="#main",
                    hx_swap="innerHTML",
                    )
            ),
        ),
    )

@rt('/')
def get():
    # return RedirectResponse('/chat') # working 100%
    return RedirectResponse('/dashboard') # input filed not present in output HTML

serve()

I have encountered a strange behavior, if you wrap the chat page inside some basic container like in the minimal reproducible example below, the input field is not displayed if hx_swap_oob='true'.