FastHTML htmx attribute is not translated in final HTML

Question

I was making a simple Input field in FastHTML.

A function MakeInput returns the input field as I wish to clear the input field after processing the form.

def MakeInput():
    return Input(
        placeholder='Add new Idea',
        id='title',
        hx_swap_oob='true'
    )


@route('/todos')
def get():     

    form = Form(
        Group(
            MakeInput(),
            Button('Save',hx_post='/',target_id='todo-list',hx_swap='beforeend')
            )
        )
    

    return Titled(
        'List',
        Card(
            Ul(*todos(),id='todo-list'),
            header=form
        )
    )


@route('/')
def post(todo:Todo):
    return todos.insert(todo), MakeInput()

But when the final HTML is rendered, the attribute becomes hx-swap:oob='true'. This causes problem for the htmx part to replace the existing element, and creates a new element.

for eg:

Actual Result

It should be hx-swap-oob='true'.

Is there is issue with the way I am passing the attributes in FastHTML functions?

Answer 1

This is a bug that was fixed in version 0.3.1, see the following issue: https://github.com/AnswerDotAI/fasthtml/issues/254

Update to version 0.3.1 or higher and you should be fine.