Autofocus in modal should also focus non-native input elements

[mrflix]

Description

I have a structure with two tags fields at the beginning:

credits:
  type: structure
  fields:
    role:
      type: tags
    name:
      type: tags
    website:
      type: url

Whenever I add a new entry and the fields slide in from the side, the website field gets focused.

Expected behavior
The first field – the role field – should get focused.

Screenrecording

Screenshot.2024-03-15.at.15.39.56.mp4

Your setup

Kirby Version
4.1.2

[afbora]

Not sure this is bug or intended but not just for tags field, same for also structure, object, blocks and layout field.

[gbdesign2023]

@mrflix You can specify which field should be automatically focused on the field properties:
autofocus: true
https://getkirby.com/docs/reference/panel/fields/text#field-properties
Please note: Only the first field with this name is considered.

[mrflix]

Thanks for the hint, Gerrit. I added autofocus: true to the first field (role) and that made the second field (name) autofocus when adding a new row to the structure O_o

[gbdesign2023]

Of course, this is not the purpose of the autofocus option if it does not work. Let's wait and see what the developers have to say.

[distantnative]

I added autofocus: true to the first field (role) and that made the second field (name) autofocus when adding a new row to the structure

I cannot reproduce this.

When I add

credits:
  type: structure
  fields:
    role:
      type: tags
      autofocus: true
    name:
      type: tags
    website:
      type: url

the first field gets focused:

Without setting an explicit autofocus, dialogs and drawers will attempt to focus the first element from this list of selectors:

   	 "[autofocus]",
   	"[data-autofocus]",
   	"input",
   	"textarea",
   	"select",
   	"[contenteditable=true]",
   	"[type=submit]",
   	"button"

Since the tags field/input is rather special, the native input element of the text fields grabs the focus instead.

[mrflix]

I can't replicate the bug either. autofocus: true on role works. Thanks for taking the time to test it @distantnative

Since the tags field/input is rather special, the native input element of the text fields grabs the focus instead.

For me it was a very unintuitive experience that the third field received focus when I added a new line. The fields are sorted in order of importance and I always want to fill in the first field first.

[afbora]

I think this is not related autofocus: true. First field should be focused in the form without autofocus but doesn't working for some fields (structure, object, blocks and layout). For ex: if first field is text field, it's working. But if first field is blocks field, it doesn't focus to blocks field.

[distantnative]

I've rephrased the title. The focus helper used for dialogs and drawers to set the focus on open should also consider other fields/inputs than the native elements listed in https://github.com/getkirby/kirby/blob/main/panel/src/helpers/focus.js#L28-L37

Technically, button is listed in this selector list which the tags list includes. However, since there are native inputs from other fields present in the drawer as well, those will receive preference currently.