dwyl / dwyl/learn-phoenix

How to autofocus an input in a Phoenix Form?

Open
#138 0 comments 4 reactions 0 assignees View on GitHub
question technical
Dominant language
No language data
Stars
664
Forks
41
PR merge metrics
No merged PRs in 30d

Description

If you are writing a "traditional" Phoenix (without `LiveView`) App
and want to `autofocus` an `input` this works:

```html
<%= text_input f, autofocus: "true" %>
```

> **Note**: the _value_ of can be anything e.g: `autofocus: "autofocus"` works too as does `autofocus: ""` (empty string). We just prefer the value `"true"` for clarity in our code.

Whereas our 3 previous attempts _don't_ work:

```html
<%= text_input f, :autofocus %> # using an atom fails
```
```html
<%= text_input f, autofocus %> # using a keyword fails
```

```html
<%= text_input f, "autofocus" %> # using a string fails
```

We read through https://hexdocs.pm/phoenix_html/Phoenix.HTML.Form.html and did not find any reference to `autofocus` ... we read through https://elixirforum.com/t/phoenix-liveview-callbacks-to-put-text-input-focus-on-the-selected-input-field/21148 but that is specific to views rendered with `LiveView`.

If anyone is building a "traditional" Phoenix App as we are in https://github.com/dwyl/phoenix-todo-list-tutorial then this is the method that works.

Contributor guide

Open the contributing guide

Research direction

No repository file, test, or entry point is named. Start by reviewing the Phoenix.HTML.Form documentation and the linked tutorial, then identify where guidance for traditional Phoenix form inputs belongs and consider the issue addressed when that guidance is captured in the project’s intended documentation.

Written by the indexing model from the issue text.

Assessment

Tech stack
elixir, html
Domain
documentation
Issue type
Documentation
Difficulty
1/5
Estimated time
Under an hour
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.