Broken UI with Array Fieldtype

[aerni]

Bug Description

The UI of the Array Fieldtype breaks in mode:keyed when you don't provide labels to the keys.

How to Reproduce

Use this blueprint to reproduce:

sections:
  address:
    display: Address
    fields:
      -
        handle: address
        field:
          mode: keyed
          keys:
            company: Company
            street: 'Street + Nr.'
            zip: 'ZIP Code'
            city: City
            country: Country
          display: Address
          type: array
          icon: array
          instructions: 'The address of your company'
          listable: hidden
          validate:
            - required
      -
        handle: contact
        field:
          mode: keyed
          keys:
            email: null
            phone: null
          display: Contact
          type: array
          icon: array
          instructions: 'The contact information of your company'
          listable: hidden
          validate:
            - required

Extra Detail

Environment

Statamic 3.0.28 Pro
Laravel 8.15.0
PHP 7.4.12
aerni/social-links 2.1.0
aerni/zipper 1.2.0
jonassiewertsen/statamic-livewire 2.1.2
spatie/statamic-responsive-images 1.4.0
visuellverstehen/statamic-classify 2.0.0

[duncanmcclean]

I can confirm this issue, thanks for the YAML btw. Is there any reason why you're not providing labels for email and phone?

[aerni]

Nope. Just ran to into this by accident. I'm fine having to provide labels. But then the blueprint builder should require the labels.

[duncanmcclean]

Yeah, that's probably the best solution (to require them in the blueprint builder)

[github-actions]

This issue has not had recent activity and has been marked as stale — by me, a robot. Simply reply to keep it open and send me away. If you do nothing, I will close it in a week. I have no feelings, so whatever you do is fine by me.

[aerni]

Still an issue.

[mikemartin]

Definitely still an issue.

[mikemartin]

@aerni I'm experiencing a similar issue when using the Array Fieldtype inside a grid.

-
    handle: hero_buttons
    field:
      type: grid
      display: 'Hero Button'
      fields:
        -
          handle: hero_button
          field:
            type: array
            display: Button
            keys:
              label: Label
              link: Link
            listable: hidden
            mode: keyed
      max_rows: 2
      add_row: 'Add Button'
      listable: hidden
      mode: table
      reorderable: true

[jesseleite]

@mikemartin To your example there, fields within grids were fixed by #3235 🎉

[mikemartin]

Thanks mate!