Focus component

If you want to focus on a component, you can use me.focus_component which focuses the component with the specified key if it is focusable.

Example

import mesop as me


@me.page(path="/focus_component")
def page():
  with me.box(style=me.Style(margin=me.Margin.all(15))):
    me.select(
      options=[
        me.SelectOption(label="Autocomplete", value="autocomplete"),
        me.SelectOption(label="Checkbox", value="checkbox"),
        me.SelectOption(label="Input", value="input"),
        me.SelectOption(label="Link", value="link"),
        me.SelectOption(label="Radio", value="radio"),
        me.SelectOption(label="Select", value="select"),
        me.SelectOption(label="Slider", value="slider"),
        me.SelectOption(label="Slide Toggle", value="slide_toggle"),
        me.SelectOption(label="Textarea", value="textarea"),
        me.SelectOption(label="Uploader", value="uploader"),
      ],
      on_selection_change=on_selection_change,
    )

  me.divider()

  with me.box(
    style=me.Style(
      display="grid",
      gap=5,
      grid_template_columns="1fr 1fr",
      margin=me.Margin.all(15),
    )
  ):
    with me.box():
      me.autocomplete(
        key="autocomplete",
        label="Autocomplete",
        options=[
          me.AutocompleteOption(label="Test", value="Test"),
          me.AutocompleteOption(label="Test2", value="Tes2t"),
        ],
      )

    with me.box():
      me.checkbox("Checkbox", key="checkbox")

    with me.box():
      me.input(key="input", label="Input")

    with me.box():
      me.link(key="link", text="Test", url="https://google.com")

    with me.box():
      me.radio(
        key="radio",
        options=[
          me.RadioOption(label="Option 1", value="1"),
          me.RadioOption(label="Option 2", value="2"),
        ],
      )

    with me.box():
      me.select(
        key="select",
        label="Select",
        options=[
          me.SelectOption(label="label 1", value="value1"),
          me.SelectOption(label="label 2", value="value2"),
          me.SelectOption(label="label 3", value="value3"),
        ],
      )

    with me.box():
      me.slider(key="slider")

    with me.box():
      me.slide_toggle(key="slide_toggle", label="Slide toggle")

    with me.box():
      me.textarea(key="textarea", label="Textarea")

    with me.box():
      me.uploader(
        key="uploader",
        label="Upload Image",
        accepted_file_types=["image/jpeg", "image/png"],
        type="flat",
        color="primary",
        style=me.Style(font_weight="bold"),
      )


def on_selection_change(e: me.SelectSelectionChangeEvent):
  me.focus_component(key=e.value)

API

focus_component

Focus the component specified by the key

PARAMETER	DESCRIPTION
key	The unique identifier of the component to focus on. This key should be globally unique to prevent unexpected behavior. If multiple components share the same key, the first component instance found in the component tree will be focused on. TYPE: str