Automatically focus input fields on certain forms

[Kovah]

Description
This is a small UX improvement. The first or the most important input field should be automatically focused when loading a certain form. This would be incredibly helpful when enabling the "After storing, return here to create another one." option in a form. At the moment I have to click into the input field manually or use tab to navigate to the input field.

Examples where this could be added:

• Adding new categories
• Adding new tags

Solution
Add an autofocus HTML tag to the input fields.

[Kovah]

@JC5 I would implement this if you are ok with that.
(Great app btw!)

[JC5]

Sure thing, just make sure you create the PR on the develop branch. 👍

[Kovah]

So, I just tried to implement this. Edited resources/views/categories/create.twig and replaced line 18 with {{ ExpandedForm.text('name', '', ['autofocus']) }}

However, autofocus only works in Safari for some reason. In Chrome and Firefox the focus is lost after a fraction of a second. I suppose that some script is blocking or interferes the expected behaviour. To make the autofocus behaviour working as expected, I would remove the autofocus tags and add this to the firefly.js file:

// Focus first visible form element in the content area
$(".content-wrapper form input:enabled:visible:first").first().focus().select()

The limitation to the content area would be needed because otherwise the search box in the sidebar is the first input field on the page.

[JC5]

Most forms will now have this in the next release.