Comments (22)
eminos
commented on August 27, 2024
1
Awesome. I'll investigate further based on that input. Thank you.
from statamic-tabs.
eminos
commented on August 27, 2024
1
I'm closing this issue for now, but please reopen if you experience this again.
from statamic-tabs.
eminos
commented on August 27, 2024
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.
from statamic-tabs.
stuartcusackie
commented on August 27, 2024
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.
from statamic-tabs.
eminos
commented on August 27, 2024
So that code is Bard related. Where do you have that Bard field?
from statamic-tabs.
stuartcusackie
commented on August 27, 2024
I think it might be the replicator, this blueprint has no Bard fields. Here's a basic blueprint - deleted.
from statamic-tabs.
eminos
commented on August 27, 2024
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.
from statamic-tabs.
stuartcusackie
commented on August 27, 2024
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
from statamic-tabs.
eminos
commented on August 27, 2024
See if v1.0.3 solves the issue.
from statamic-tabs.
stuartcusackie
commented on August 27, 2024
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.
from statamic-tabs.
stuartcusackie
commented on August 27, 2024
from statamic-tabs.
eminos
commented on August 27, 2024
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?
from statamic-tabs.
stuartcusackie
commented on August 27, 2024
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.
from statamic-tabs.
stuartcusackie
commented on August 27, 2024
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
from statamic-tabs.
stuartcusackie
commented on August 27, 2024
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.
from statamic-tabs.
eminos
commented on August 27, 2024
Hey @stuartcusackie. I've been really busy lately and I forgot about this! Sorry! 😳
I'll take a look today!
from statamic-tabs.
stuartcusackie
commented on August 27, 2024
Thanks man! Sorry for the trouble! Statamic really needs this tabs package.
from statamic-tabs.
eminos
commented on August 27, 2024
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?
from statamic-tabs.
stuartcusackie
commented on August 27, 2024
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....
from statamic-tabs.
stuartcusackie
commented on August 27, 2024
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!
from statamic-tabs.
eminos
commented on August 27, 2024
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.
from statamic-tabs.
stuartcusackie
commented on August 27, 2024
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!
from statamic-tabs.
Related Issues (3)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from statamic-tabs.