Added autofocus feature to input components in input.py - (09/15/24).

[StefanoCandiani]

As detailed in Issue #775 (Support Autofocus), I believe I added functionality of autofocus to each of the input functions (InputText, InputFloat, InputInt, and InputNumeric). Each of these will have a default parameter called focus that is initially set to False though the user can set to true or false. For InputText and InputNumeric, the focus variable is directly linked to the TextField autofocus default variable while for InputFloat and InputInt, the focus variable is merely passed on when the InputNumeric is called in the return statement. This is my first ever contribution so I'm not sure if I did it correctly or not so please let me know if I did a mistake or if I can optimize the code. Thank you!

[iisakkirotko]

Hi @StefanoCandiani! Thanks a lot for the PR.

I had two comments:

• I think the user-facing name of the attribute should be autofocus, since it more clearly communicates the intended use of the attribute and matches the HTML and Vuetify attribute.

• We should elaborate on the use in the docstring. I'd like to see:

  • That the element is focused on page load or when it is first mounted (in a solara.lab.ConfirmationDialog, solara.lab.Menu, or inside an if statement, for example), and
  • That only one element per page (or more properly per element that gets mounted, I guess) should have autofocus=True

  mentioned.

[StefanoCandiani]

Would this be fine? I changed focus to autofocus and expounded on the autofocus component in the docstrings. Thanks!

[StefanoCandiani]

How can I fix this issue? It seems that a specific version is unable to work but I'm unsure how to make it work? Does it just not support autofocus features in that version? Thanks.

[maartenbreddels]

The failure in CI was a fluke. This is super cool. Did someone check this with a dialog? Does this work as expected? And should we have tests?
Also, I wonder what happens if you want to open a dialog, while the main page already has an autofocus.

[iisakkirotko]

@maartenbreddels I did manually verify it works as expected for menus, dialogs, initial load, and conditional rendering. If there are any things, let me know. For reference, as per MDN docs autofocus should focus the element on initial page load, or when the <dialog> the element is in is displayed. If you open a dialog with autofocus when the page itself already had an element with autofocus, the one in the dialog captures focus.

[maartenbreddels]

It seems vuetify is not using a dialog element, but just a div: https://vuetifyjs.com/en/components/dialogs/#usage (vuetify 2 and3).

So, the user is responsible for making sure autofocus for a text element is not set, if a vuetify dialog with autofocus is used/open.

[iisakkirotko]

We discussed this with @maartenbreddels and thought it would be a good idea to also include a simple example of autofocus being used in the documentation page for input components (you can add it to solara/website/pages/documentation/components/input/input.py, see button.py for an example).

Something to the tune of

import solara
import solara.lab


@solara.component
def Page():
    show_dialog = solara.use_reactive(False)
    solara.InputText("Type here", autofocus=True)
    solara.Button("Show dialog", on_click=lambda: show_dialog.set(True))
    with solara.lab.ConfirmationDialog(open=show_dialog):
        solara.InputFloat("Float here", autofocus=True)

Feel free to get creative with the example and make it yours!

[maartenbreddels]

A bit off topic, but I just want to share this:
We can now run PyCafe snippets using build artifacts from CI 🥳
This means we can easily test out this branch by following this link to PyCafe