[Panel] Blueprint autofocus property not working as expected

[foxacid]

The video shows a structure field containing a date field as first child. When clicking on an existing entry, the date field pops up and can only be closed by confirming the date. Clicking elsewhere on the structure does nothing and clicking outside of the structure closes the parent as well.

Setting autofocus: false on either date field or its parent structure field does not seem to have any effect. Autofocus also occurs when using the arrow buttons to navigate between structure entries.

k3_structure-date-field-autofocus.mov

Simplified Blueprint

label: Events
type: structure
autofocus: false
fields:
  date:
    extends: fields/date
    required: true
    autofocus: false

Expected behavior

I'd expect autofocus: false to prevent focus when:

1. Opening a structure field
2. Navigating between structure field entries

Additionally I'd expect the date field to close when clicking anywhere but the date field (just like a HTML select box), but this should probably be a separate issue report...

Workarounds

The only workaround I found was to add a honeypot line field to intercept the focus (a hidden field doesn't work, unfortunately).

Kirby Version

3.5

Desktop

Mac OS 10.14.6, Firefox 84.0.2

[foxacid]

A gap field also works as honeypot 😛

[foxacid]

See related issue #3084

[afbora]

@foxacid Actually I think your use is not correct. Instead of autofocus: false, you should add autofocus: true to another field.

  test:
    label: Test
    type: structure
    fields:
      date:
        label: Date
        type: date
      name:
        label: Name
        type: text
        autofocus: true # used here instead on date field
      text:
        label: Text
        type: text

[afbora]

Also autofocus issue on structure field fixed 3.5.1. You can test here: https://github.com/getkirby/kirby/releases/tag/3.5.1-rc.1

[foxacid]

@foxacid Actually I think your use is not correct. Instead of autofocus: false, you should add autofocus: true to another field.

Thanks, but did you test that? It doesn't work for me, unfortunately...

Also no luck with 3.5.1-rc.1

[afbora]

@foxacid Did you delete the media folder? Yes, i tested and works as expected.

Could you share full blueprint setup if still doesn't working?

[foxacid]

@foxacid Did you delete the media folder? Yes, i tested and works as expected.

Weird. I upgraded via composer and just deleted the media folder. No change.

Could you share full blueprint setup if still doesn't working?

Here's my full blueprint snippet with the 'honeypot' commented out and a test field with type: textto test autofocus:

label: Events
type: structure
sortBy: date asc
columns:
  date:
    width: 1/6
  events:
    width: 5/6
fields:
#  autofocusHoneypot:
#    type: gap
  date:
    extends: fields/date
    required: true
  text:
    type: text
    autofocus: true
  events:
    type: structure
    sortBy: date asc
    autofocus: true
    columns:
      start:
        width: 1/4
      end:
        width: 1/4
      title:
        width: 1/2
    fields:
      start:
        label: Start
        type: time
        width: 1/2
      end:
        label: End
        type: time
        width: 1/2
      title:
        type: text
        label: Title
      text:
        extends: fields/writer
        label: Description
      linkLive:
        label: Live-URL
        type: url
        width: 1/2
      linkOnDemand:
        label: On-Demand
        type: pages
        query: site.find('on-demand')
        max: 1
        width: 1/2

[afbora]

@foxacid Here screencast with your blueprint on 3.5.1-RC1 (Windows 10, Firefox/Chrome)

[foxacid]

Ah! I can confirm that it works when the fields are empty. Store some values and try again, please 😉

[afbora]

Still working for me. You've not selected the text field from columns. So could you be having this problem? Except for the other issue with the date field calendar, all focus works.

columns:
      date:
        width: 1/6
      text:
        width: 1/6
      events:
        width: 4/6

[foxacid]

Thanks for hanging in there! Here's my video reply:

k3_autofocus.mov

[afbora]

@foxacid Thank you for testing it patiently 👍 I can see it now 😅 I hope will be fixed 3.5.1 stable version at next week.

[foxacid]

@afbora cool. I still believe that an implementation of autofocus: false would be helpful as not all fields accept the autofocus property. In my use case for example, there's only a date and a structure field and the latter cannot be used to intercept the focus...

[afbora]

The autofocus value of a field is always false. I've fixed the issue on #3085

[afbora]

✅

[maxchene]

I'm still having the same behavior on 3.5.6 and have to add a gap field 😢

[afbora]

@kaliel86 Could you post your structure blueprint to test please?

[maxchene]

Of course, here it is.
If i remove gap field, first date field is autofocused when clicking 'Add a session' button.

sessions:
            label: Session(s)
            type: structure
            help: Merci de renseigner 1 session minimum et 3 sessions maximum
            max: 3
            min: 1
            autofocus: false
            sortBy: start asc
            fields:
              gap:
                type: gap
                width: 1/4
              start:
                label: Date de début
                type: date
                display: DD.MM.YYYY
                required: true
                autofocus: false
              end:
                label: Date de fin
                type: date
                display: DD.MM.YYYY
                required: true
              delai_realy_bird:
                label: Délai Early bird
                type: date
                display: DD.MM.YYYY
              delai_inscription:
                label: Délai d'inscription
                type: date
                display: DD.MM.YYYY
                required: true
              lien_inscription:
                label: Lien d'inscription
                type: url
                icon: url
                required: true
              lien_calendrier:
                label: Lien du calendrier
                type: url
                icon: url
                placeholder: https://yolo.com
                required: true

[afbora]

@kaliel86 I can't reproduce the issue when i click to add button in 3.5.6. If you click to date in row to edit, this is intended behavior.

[maxchene]

Did you tried with gap field removed ?

[afbora]

Yes, you right. My mistake. Could you create new issue for this please?