I have created a simple component for authors to add links. They enter anchor text, link destination, title attribute, via textfield. They set the target attribute via a dropdown list, xtype=selection. The issue we run into, is that if the author has entered multiple instances of the same component on a page, the dropdowns become non-editable after they are set the first time. They cannot be edited changed until the page edit view/content finder is closed and reopened.
1. User drag/drops component
2. User makes selection from dropdown xtype=selection
3. User drag/drops same component again to allowed parent
4. User make selection from dropdown xtype=selection in second instance of component
5. User can no longer change the selection in either instance of the component without closing and reopening edit view/content finder.
6. User closes and reopens edit view/content finder.
7. Again, both instances of the dropdown xtype=selection become non-editable after first selection of an option until the edit view/content finder is closed and reopened.
When there is only one instance of the component on the page, the drop downs/xtype=select remain editable at all times.
In addition to this particular scenario, I've had to work around some other issues of multiple instances of a component, where only one instance on a page works at all, the data gets crossed/jumbled between instances of the same component, etc.
My question is first, how might I solve for the scenario fully called out in this question? Secondly, is there some methodology to making multiple instances of the same component track themselves individually, work together on the same page, play nicely with each other?
Any assistance is appreciated.