Calling set_focus fails when the autofocus property is set to true for the input element.

[jackychou1119]

Hi everyone,

def mytest() -> rx.Component:
    return rx.container(
        rx.vstack(
            rx.input(
                id="input_1",
            ),
            rx.input(
                id="input_2",
                autofocus=True
            ),
            rx.hstack(
                rx.button('button1', on_click=rx.set_focus("input_1")),
                rx.button('button2', on_click=rx.set_focus("input_2")),
            )
        )
    )

Pressing button2 causes the following error. How can I resolve this issue?

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'focus')

[masenf]

This is a bug because the autofocus ends up trying to set the ref prop on the input twice (generated output below):

  <Input id={`input_2`} ref={ref_input_2} type={`text`} ref={focusRef} />

So the focusRef ends up overwriting ref_input_2, and thus trying to set focus with ref_input_2 does not work (the passed ref is null).

As a workaround, you might try removing the autofocus and replacing it with an on_mount that applies the focus to the given element.

def mytest() -> rx.Component:
    return rx.container(
        rx.vstack(
            rx.input(
                id="input_1",
            ),
            rx.input(
                id="input_2",
                on_mount=rx.set_focus("input_2"),
            ),
            rx.hstack(
                rx.button('button1', on_click=rx.set_focus("input_1")),
                rx.button('button2', on_click=rx.set_focus("input_2")),
            )
        )
    )

i think autofocus will probably be deprecated in a future release, since it doesn't really make sense to special case it (and it interferes with the composability of other reflex features)

[jackychou1119]

Thank you for your explanation and suggestion. 😄