Py.Cafe

maartenbreddels/

solara-force-focus

Force focus on a particular element in solara

DocsPricing
  • app.py
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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)
forcefocus.vue
1
Could not load content