Visual glitch when adding new sets

[stuartcusackie]

Each time I add a new set containing tabs I get this glitch:

Note that:

• button has no icon and the words 'BG Image' appear at the bottom (one my tab labels)
• Clicking the button does nothing.
• If I click a tab or add another set it goes back to normal (shown below)

Thanks!

[eminos]

I could not replicate this.
I created a Replicator with one Set (Full block flexible) that had these fields:

A common mistake, that's easy to make, is to set the same handle for the tab field as some other field.
For example both the Tab and Assets(?) field are named "BG Image", if they have the default handle of "bg_image" that would create issues. That's standard Statamic stuff, you can't have multiple fields with the same handle (in the same context).

But I tried that and I still couldn't replicate the specific issue from your screenshot, so I'm not sure what's causing it.
Do you get any errors in the browser console?
Since the Tabs addon is all javascript based (it's moving around the DOM when the page is loaded), I guess that's where the issue is, so you might have errors in the console.
Otherwise maybe share your blueprint, or even better a simplified blueprint that shows the issue.

[stuartcusackie]

I checked this and actually my field labels / handles are:
Tab field: BG Image: tab_bg_image
Asset field: BG Image: bg_image

Here is the console output:

• I deleted all other sets in my page builder and the error went away when I am just using the set that contains tabs.
• If I add in one other set the bug comes back.

[eminos]

So that code is Bard related. Where do you have that Bard field?

[stuartcusackie]

I think it might be the replicator, this blueprint has no Bard fields. Here's a basic blueprint - deleted.

[eminos]

I had to make some minor changes to get that blueprint to work on my Statamic installation.

• remove "one_half_block_cta"
• change assets container to "assets"

With those changes the blueprint works, but I still couldn't replicate the issue.
How exactly to you invoke the issue?
You create a new Entry with that blueprint. Add new set. Save the Entry? And then?

@stuartcusackie If you want to chat about the issue, you can find me in the Statamic discord.

[stuartcusackie]

Sorry, now I cannot produce the errror from the blueprint I shared earlier.

Can you try this one please? Sorry for the length! DELETED

• The problem happens randomly sometimes, but if you add enough sets then you should see it.
• Having three tabs instead of two also seems to make the problem worse.
• Console errors don't always appear

[eminos]

See if v1.0.3 solves the issue.

[stuartcusackie]

It's partially fixed!

There is also a delay / lag of between 3 - 10 seconds before the button on my replicator is clickable (see my first screenshot where the icon is missing). I haven't seen this problem before so I think the tabs are causing a delay somehow.

Also, the sets from my replicator don't appear until I switch tabs. See my gif video below.

[stuartcusackie]

[eminos]

I see. I could see that issue as well, but it was fixed for me in the last update.
Unless I can replicate it I don't know how to try to solve it.
Does the same thing happen if you have less content in the entry? On a newly created entry?

[stuartcusackie]

Yes I tried it in a newly created entry and the same problem occurred. If I have less fields in my blueprint then it doesn't occur but I can't quite narrow down to any specific field that is conflicting.

[stuartcusackie]

I have narrowed this down to an asset field conflicting. Simply having a single asset field within my replicator sets tabs introduces a lag and breaks the tabs.

The blueprint below should recreate the problem. If I just remove the bg_image asset field then everything is fine, no matter how many sets I add.

Maybe it's something to do with the Droppable area of the asset field...? That's the only thing I can think of that makes an asset field special.

title: 'Page Builder'
tabs:
  main:
    display: Main
    sections:
      -
        fields:
          -
            handle: title
            field:
              type: text
              required: true
              validate:
                - required
              localizable: false
          -
            handle: page_builder
            field:
              collapse: true
              sets:
                main:
                  display: Main
                  instructions: null
                  icon: null
                  sets:
                    instagram:
                      display: 'Special Block (Instagram)'
                      instructions: null
                      icon: null
                      fields:
                        -
                          handle: block_id
                          field:
                            input_type: text
                            antlers: false
                            type: text
                            display: 'Block ID'
                            icon: text
                            localizable: false
                            listable: hidden
                            instructions_position: above
                            visibility: visible
                            hide_display: false
                            instructions: 'Give your block an ID so that you can locate it easily and link to it directly.'
                            validate:
                              - alpha_dash
                    full_block_flexible:
                      display: 'Full block (flexible)'
                      instructions: null
                      icon: null
                      fields:
                        -
                          handle: block_id
                          field:
                            input_type: text
                            antlers: false
                            type: text
                            display: 'Block ID'
                            icon: text
                            localizable: false
                            listable: hidden
                            instructions_position: above
                            visibility: visible
                            hide_display: false
                            instructions: 'Give your block an ID so that you can locate it easily and link to it directly.'
                            validate:
                              - alpha_dash
                        -
                          handle: tab_flexible_content
                          field:
                            type: tab
                            display: Content
                            icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="currentColor" d="M253.75 166.28L231.46 92a13.91 13.91 0 0 0-13.41-10H208a6 6 0 0 0 0 12h10.05a2 2 0 0 1 1.95 1.42L240 162h-35.54l-21-70a13.91 13.91 0 0 0-13.41-10H160a6 6 0 0 0 0 12h10.05a2 2 0 0 1 1.95 1.42L192 162h-35.54l-21-70a13.91 13.91 0 0 0-13.41-10H38a13.91 13.91 0 0 0-13.46 10L2.28 166.2v.2a2.79 2.79 0 0 0-.1.39a.11.11 0 0 0 0 .05A6 6 0 0 0 8 174h240a6 6 0 0 0 5.75-7.72ZM36 95.42A2 2 0 0 1 38 94h84.1a2 2 0 0 1 1.9 1.43L144 162H16.06Z"></path></svg>'
                            localizable: false
                            listable: hidden
                            instructions_position: above
                            visibility: visible
                            hide_display: false
                        -
                          handle: sections
                          field:
                            collapse: false
                            previews: true
                            fullscreen: false
                            sets:
                              new_set_group:
                                display: 'New Set Group'
                                instructions: null
                                icon: null
                                sets:
                                  section_button_row:
                                    display: 'Section: button row'
                                    instructions: 'A single button or group of buttons'
                                    icon: align-object-center
                                    fields:
                                      -
                                        handle: buttons
                                        field:
                                          collapse: true
                                          previews: true
                                          fullscreen: false
                                          sets:
                                            new_set_group:
                                              display: 'New Set Group'
                                              instructions: null
                                              icon: null
                                              sets:
                                                button:
                                                  display: Button
                                                  instructions: null
                                                  icon: null
                                                  fields:
                                                    -
                                                      import: button_new
                                          type: replicator
                                          display: Buttons
                                          icon: replicator
                                          localizable: false
                                          listable: hidden
                                          instructions_position: above
                                          visibility: visible
                                          hide_display: false
                                          max_sets: 2
                                  section_text:
                                    display: 'Section: text'
                                    instructions: 'Text of any size with optional buttons'
                                    icon: align-object-center
                                    fields:
                                      -
                                        handle: tab_content
                                        field:
                                          type: tab
                                          display: Content
                                          icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="currentColor" d="M253.75 166.28L231.46 92a13.91 13.91 0 0 0-13.41-10H208a6 6 0 0 0 0 12h10.05a2 2 0 0 1 1.95 1.42L240 162h-35.54l-21-70a13.91 13.91 0 0 0-13.41-10H160a6 6 0 0 0 0 12h10.05a2 2 0 0 1 1.95 1.42L192 162h-35.54l-21-70a13.91 13.91 0 0 0-13.41-10H38a13.91 13.91 0 0 0-13.46 10L2.28 166.2v.2a2.79 2.79 0 0 0-.1.39a.11.11 0 0 0 0 .05A6 6 0 0 0 8 174h240a6 6 0 0 0 5.75-7.72ZM36 95.42A2 2 0 0 1 38 94h84.1a2 2 0 0 1 1.9 1.43L144 162H16.06Z"></path></svg>'
                                          localizable: false
                                          listable: hidden
                                          instructions_position: above
                                          visibility: visible
                                          hide_display: false
                                      -
                                        handle: text
                                        field:
                                          buttons:
                                            - h1
                                            - h2
                                            - h3
                                            - bold
                                            - italic
                                            - removeformat
                                            - anchor
                                          smart_typography: false
                                          save_html: false
                                          inline: false
                                          toolbar_mode: fixed
                                          reading_time: false
                                          word_count: false
                                          fullscreen: true
                                          allow_source: true
                                          enable_input_rules: true
                                          enable_paste_rules: true
                                          remove_empty_nodes: false
                                          antlers: false
                                          link_noopener: false
                                          link_noreferrer: false
                                          target_blank: false
                                          always_show_set_button: false
                                          collapse: false
                                          previews: true
                                          type: bard
                                          display: Text
                                          icon: bard
                                          localizable: false
                                          listable: hidden
                                          instructions_position: above
                                          visibility: visible
                                          hide_display: false
                                      -
                                        handle: tab_design
                                        field:
                                          type: tab
                                          display: Design
                                          icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="currentColor" d="M253.75 166.28L231.46 92a13.91 13.91 0 0 0-13.41-10H208a6 6 0 0 0 0 12h10.05a2 2 0 0 1 1.95 1.42L240 162h-35.54l-21-70a13.91 13.91 0 0 0-13.41-10H160a6 6 0 0 0 0 12h10.05a2 2 0 0 1 1.95 1.42L192 162h-35.54l-21-70a13.91 13.91 0 0 0-13.41-10H38a13.91 13.91 0 0 0-13.46 10L2.28 166.2v.2a2.79 2.79 0 0 0-.1.39a.11.11 0 0 0 0 .05A6 6 0 0 0 8 174h240a6 6 0 0 0 5.75-7.72ZM36 95.42A2 2 0 0 1 38 94h84.1a2 2 0 0 1 1.9 1.43L144 162H16.06Z"></path></svg>'
                                          localizable: false
                                          listable: hidden
                                          instructions_position: above
                                          visibility: visible
                                          hide_display: false
                                      -
                                        handle: heading_size
                                        field:
                                          options:
                                            default: Default
                                            large: Large
                                          taggable: false
                                          push_tags: false
                                          multiple: false
                                          clearable: false
                                          searchable: true
                                          cast_booleans: false
                                          default: default
                                          type: select
                                          display: 'Heading size'
                                          icon: select
                                          localizable: false
                                          width: 25
                                          listable: hidden
                                          instructions_position: above
                                          visibility: visible
                                          hide_display: false
                                      -
                                        handle: copy_size
                                        field:
                                          options:
                                            default: null
                                            large: null
                                          taggable: false
                                          push_tags: false
                                          multiple: false
                                          clearable: false
                                          searchable: true
                                          cast_booleans: false
                                          default: default
                                          type: select
                                          display: 'Copy size'
                                          icon: select
                                          localizable: false
                                          width: 25
                                          listable: hidden
                                          instructions_position: above
                                          visibility: visible
                                          hide_display: false
                                      -
                                        handle: center_text
                                        field:
                                          default: false
                                          type: toggle
                                          display: 'Center text'
                                          icon: toggle
                                          localizable: false
                                          width: 25
                                          listable: hidden
                                          instructions_position: above
                                          visibility: visible
                                          hide_display: false
                                      -
                                        handle: contain_text
                                        field:
                                          default: false
                                          type: toggle
                                          display: 'Contain text'
                                          icon: toggle
                                          localizable: false
                                          width: 25
                                          listable: hidden
                                          instructions_position: above
                                          visibility: visible
                                          hide_display: false
                                  section_text_image_row:
                                    display: 'Section: text / image row'
                                    instructions: 'Text on one size and an image on the other'
                                    icon: align-object-center
                                    fields:
                                      -
                                        handle: textarea_field
                                        field:
                                          default: 'Coming soon'
                                          antlers: false
                                          type: textarea
                                          display: 'Textarea Field'
                                          icon: textarea
                                          localizable: false
                                          listable: hidden
                                          instructions_position: above
                                          visibility: read_only
                                          hide_display: false
                            type: replicator
                            display: Sections
                            icon: replicator
                            localizable: false
                            listable: false
                            instructions_position: above
                            visibility: visible
                            hide_display: false
                        -
                          handle: tab_design
                          field:
                            type: tab
                            display: Design
                            icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="currentColor" d="M253.75 166.28L231.46 92a13.91 13.91 0 0 0-13.41-10H208a6 6 0 0 0 0 12h10.05a2 2 0 0 1 1.95 1.42L240 162h-35.54l-21-70a13.91 13.91 0 0 0-13.41-10H160a6 6 0 0 0 0 12h10.05a2 2 0 0 1 1.95 1.42L192 162h-35.54l-21-70a13.91 13.91 0 0 0-13.41-10H38a13.91 13.91 0 0 0-13.46 10L2.28 166.2v.2a2.79 2.79 0 0 0-.1.39a.11.11 0 0 0 0 .05A6 6 0 0 0 8 174h240a6 6 0 0 0 5.75-7.72ZM36 95.42A2 2 0 0 1 38 94h84.1a2 2 0 0 1 1.9 1.43L144 162H16.06Z"></path></svg>'
                            localizable: false
                            listable: hidden
                            instructions_position: above
                            visibility: visible
                            hide_display: false
                        -
                          handle: height
                          field:
                            options:
                              auto: null
                              minimum: null
                            taggable: false
                            push_tags: false
                            multiple: false
                            clearable: false
                            searchable: true
                            cast_booleans: false
                            type: select
                            display: Height
                            icon: select
                            localizable: false
                            listable: hidden
                            instructions_position: above
                            visibility: visible
                            hide_display: false
                            width: 25
                            default: auto
                        -
                          handle: background_colour
                          field: block_colours.background_colour
                          config:
                            validate:
                              - required
                        -
                          handle: text_colour
                          field: block_colours.text_colour
                          config:
                            validate:
                              - required
                        -
                          handle: highlight_colour
                          field: block_colours.highlight_colour
                          config:
                            validate:
                              - required
                        -
                          handle: tab_bg_image
                          field:
                            type: tab
                            display: 'BG Image'
                            icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="currentColor" d="M253.75 166.28L231.46 92a13.91 13.91 0 0 0-13.41-10H208a6 6 0 0 0 0 12h10.05a2 2 0 0 1 1.95 1.42L240 162h-35.54l-21-70a13.91 13.91 0 0 0-13.41-10H160a6 6 0 0 0 0 12h10.05a2 2 0 0 1 1.95 1.42L192 162h-35.54l-21-70a13.91 13.91 0 0 0-13.41-10H38a13.91 13.91 0 0 0-13.46 10L2.28 166.2v.2a2.79 2.79 0 0 0-.1.39a.11.11 0 0 0 0 .05A6 6 0 0 0 8 174h240a6 6 0 0 0 5.75-7.72ZM36 95.42A2 2 0 0 1 38 94h84.1a2 2 0 0 1 1.9 1.43L144 162H16.06Z"></path></svg>'
                            localizable: false
                            listable: hidden
                            instructions_position: above
                            visibility: visible
                            hide_display: false
                        -
                          handle: bg_image
                          field:
                            mode: list
                            container: images
                            restrict: false
                            allow_uploads: true
                            show_filename: true
                            show_set_alt: true
                            type: assets
                            display: 'BG Image'
                            icon: assets
                            localizable: false
                            listable: hidden
                            instructions_position: above
                            visibility: visible
                            replicator_preview: true
                            hide_display: false
              display: 'Page Builder'
              type: replicator
              icon: replicator
              listable: hidden
              localizable: true
              instructions_position: above
              visibility: visible
              previews: true
              fullscreen: false
              hide_display: false
              replicator_preview: true
  sidebar:
    display: Sidebar
    sections:
      -
        fields:
          -
            handle: slug
            field:
              type: slug
              localizable: true
              validate:
                - required
                - 'unique_entry_value:{collection},{id},{site}'
          -
            handle: parent
            field:
              type: entries
              collections:
                - pages
              max_items: 1
              listable: false
              localizable: true

[eminos]

Awesome. I'll investigate further based on that input. Thank you.

[stuartcusackie]

Any joy here? I've got a couple of projects that could really use your tabs. My fields are a mess! Happy to make a donation once I've got everything working.

[eminos]

Hey @stuartcusackie. I've been really busy lately and I forgot about this! Sorry! 😳
I'll take a look today!

[stuartcusackie]

Thanks man! Sorry for the trouble! Statamic really needs this tabs package.

[eminos]

I remember experiencing this bug my self a few times on some test sites I'm working on.
But now I can't reproduce it no matter what I try...
Massive pages with a lot of content, images, image fields, tabs all over the place, reloading the page, etc... Nothing... it just keeps working...
Have you found a way to consistently trigger the bug? Or maybe some other valuable insight?

[stuartcusackie]

I was fairly certain last time I tested it was a simple asset field causing the problem. The field was hidden behind a tab.

I'll fire up my codebase now and see if I can reproduce it....

[stuartcusackie]

I cannot reproduce it now either! I even downgraded as far as Statamic 4.9.1.

I have a feeling it will reappear when I go to develop my tab-based page builder. I'll come back when I go ahead with that. Thanks for looking!! Sorry if it's something weird I'm doing!

[eminos]

I have experienced the bug as well on multiple occasions, so it's definitely not just you doing something weird.
The only thing I can think of is that the browser has been updated. Chrome in my case. But I doubt that has fixed it somehow.

[stuartcusackie]

I'll keep thinking on it it anyway, and I'll try to put together my full page builder over the coming weeks. There's so many moving parts in Statamic - it could be anything I guess. Thanks again!

[eminos]

I'm closing this issue for now, but please reopen if you experience this again.