import solara
clicks = solara.reactive(0)
text = solara.reactive("Do I have focus?")
@solara.component_vue("forcefocus.vue")
def ForceFocus(
enabled=False, # if you always enable it, it is annoying
children=[], # only 1 child supported
target_query="input", # the css selector to find the real element you want to focus
refocus_delay=0.1 # wait a bit before focussing again
):
...
@solara.component
def Page():
color = "green"
if clicks.value >= 5:
color = "red"
def increment():
clicks.value += 1
print("clicks", clicks) # noqa
with solara.Card("Force focus on textfield while button count < 3"):
with ForceFocus(enabled=clicks.value < 3):
solara.v.TextField(v_model=text.value, on_v_model=text.set)
solara.Button(label=f"Clicked: {clicks}", on_click=increment, color=color)