I have the same reusable element on the same page used twice, meaning reusable element instance A and reusable element instance B are both on the single page. When I open the page with reusable element instance A visible, everything is fine, then when I make instance A not visible, and make instance B visible, the dynamic expressions referencing the reusable element (these are expressions in the reusable element itself pointing to a property of that reusable element) are apparently pointing toward instance A property value set and not instance B property value set.
And if I open page with instance B visible, everything works, switch to make instance A visible and
instance B not visible, everything works, then switch to make instance A not visible and instance B visible again, it breaks again, as it seems the bug is making it so that the property value reference in dynamic expression is pointing at the wrong instance of the reusable element on the page.
The only way I was able to work around it was to make the property list value of reusable instance A the same as reusable instance B when reusable instance A is not visible.
I thought I might have tried something different and instead of referencing in a dynamic expression the name of the reusable element, I wanted to try to see if the ‘this custom definition’ would help workaround the bug, as perhaps, maybe, that is easier for bubble to track but apparently not.
That instance of the reusable element is not invisible, because if it were, I would not have been able to trigger an action within it.
Bubble is unable to reference correct instance of a reusable element when more than one are on the same page. Watch out.
Okay, so this is not necessarily a Bubble bug, but more just a quirk in how it behaves with plugins and reusable elements.
In my setup I’m using plugin that needs a specific name, and as I have that plugin element on the reusable, I gave it a dynamic name, so as to differentiate between the two possible instances of it on the same page.
What is happening as a quirk in bubble, is that upon initialization bubble will load the plugin element only when visible, and that is when it enters the DOM, but once the same plugin element is made not visible, it does not get removed from the DOM, and as such it doesn’t matter if I target the plugin with the correct dynamic name based on the instance that is visible, Bubble is still targeting the last initialized instance of the plugin.
In order to make that not an issue, I had to add a dynamic expression of ‘this plugin element is visible’ formatted as text to set the name for that plugin instance, so that when it is not visible it doesn’t have a name and therefore is not able to be targetted.
Another option would have been to alter the plugin code so that when the element is not visible I remove it from the DOM, but that would have been a bit more work.
if using a plugin you need to ensure the plugin code initializes unique element ids and references them throughout the code so it can be used more than once on the page
I had a similar issue when building the filestack plugin since I wanted to upload in multiple places on the page I had to build the plugin code to work with multiple instances of the same element on the page
if you don’t have that in the code then the same instance is shared (overwritten?) rather than unique instances existing for each element
From what I remember it’s not removed from the dom, the CSS visible property is set to hidden. Removing & adding from the DOM isn’t really efficient when you can just toggle the CSS. Using a Mutation Observer is the best way to track this.
By default Bubble plugins will create their own instances but plugin builders might store values in DOM elements since you can’t pass script values from one plugin to another.
So what can happen is that you end up with multiple instances of a plugin reading and writing off the same DOM element.
That toggle of CSS is essentially what I am doing on the plugin element itself using the dynamic expression to set the unique name/id of the instance. So now, my dynamic expression is ‘reusable element is visible: formatted as text’ with the NO value blank and the YES value set to the correct unique name/id.
Yes, this would be an approach to alter the plugin code to toggle the CSS via the plugin code. I opted to not touch the code and use the dynamic expression approach. Maybe that comes back to bite me and I’ll have to alter the code, but for now it is working.
Its Data Jedi which works fine for multiple instances on the same page visible at the same time.
What I experienced is this:
If the plugin element instance is not initialized or doesn’t have the unique name set for it, and the workflow actions target the unique plugin instance with the unique name, there is an error reported as expected that the plugin instance is not defined, because there is no matching unique name on any plugin instance that matches the unique name used in the action.
If the plugin instance is visible on the page and has the unique name set, and action runs to target it, it works fine and targets the correct instance, even if there are multiple instances of the plugin element on the same page also visible.
If the plugin instance is visible on page and targeted with unique name, it works. Then the plugin element is made not visible via conditions, and a second plugin instance is made visible via conditions, and that second plugin instance is targeted with its unique name via actions, it works. BUT, if I then make plugin instance 2 not visible by condition, making plugin instance 1 visible again by conditional, and I run actions using the unique name of plugin instance 1, it works, HOWEVER, it actual triggers the plugin instance 2 that is no longer visible. And that occurs even when the unique names of the plugin instances are completely different from each other.
The strange thing is that these plugin elements are from a reusable element. So I do not experience the same issue in #3 when the plugin elements are on the page directly (ie: 2 elements different unique names). Instead I only experience when I have two instances of a reusable element that has the ONE plugin element that uses a dynamic expression to dynamically set the unique name of the plugin element ‘instance’ (I say instance of the plugin element since it is the same plugin element but inside a reusable whose reusable is on the page twice - so two instances of the reusable that holds a single plugin element, making it so there are two instances of the plugin element, but have dynamically set unique names).
With that issue from #3 when the plugin instance 1 is made visible again, but action end up running on the now not visible plugin instance 2, the values obtained from the actions running, are designed to take the property values from the reusable element. The property values of the not visible reusable element instance were getting returned, as for some reason, the plugin instance 2 was triggering the event triggers.
