Skip to main content

A container set to horizontal auto layout with wrap, contains several instances of a component called ‘rectangle’.
This rectangle component has 2 variants : A ‘default’ variant (a black square) and a ‘hidden’ variant (the same black square with a width and height set to 0px). Upon clicking the default square, the component changes to the ‘hidden’ variant.
If you play the prototype, it’s great, upon clicking each ‘rectangle’, they disappear and the remaining instances wrap.

But if I create a component from the container, the instances of this component don’t have the same behavior and the instance of ‘rectangle’ don’t wrap anymore.

Am I missing something here ?

Here’s the Link



 

Thanks for your help.
The idea is to create a large field with many deletable chips inside.

Hi ​@Vincent Beneche, thanks so much for raising this.

 

This is a super fun concept! I took a look at the link you provided and I can definitely see the behavior you're describing in the prototype — the chips created inside the containers aren’t wrapping as intended. We'd love to take a closer look to better understand what’s happening.

 

When you get a chance, please reach out to our Product Support team with the following:

 

That'll help us access the full prototype settings and dig in further. 🙏🏻

 

Also curious, are you creating a component from the container in order to assign unique visuals to each rectangle? Would love to learn more about your use case if you’re open to sharing.

 

Let us know how it goes — and I’ll keep an eye out for any other suggestions that may come in handy here.


Hey, thanks for the answer. i just forwarded it as instructed.
In the prototype, I’ve schematised with black rectangles, but in my use case, they are chips. Tags that can be added, deleted like in the example below:
When opening the field (+18 icon), you’ll see many chips that can be deleted, but their parent frame won’t wrap.

 


Got it, thanks for sharing the file ​@Vincent Beneche — I see it on our end and we’ll be taking a closer look shortly. The prototype you included here is super helpful as well, and I’ve passed it along to our Product Support team as part of the review. Appreciate your patience! 🙏🏻


Hey ​@Vincent Beneche and anyone else following along on this thread, just circling back with an update.

I checked in on where this landed with our engineering team. While I’m not able to share a specific timeline for a fix just yet, we’re continuing to monitor both the internal project tracking this issue and this post for any developments.

We’ll be sure to share updates here as soon as we have more to report. Thanks again for your patience and for flagging this.


Hey ​@Vincent Beneche — I have an update that might help with this prototype. After checking in with our engineering team, it seems the nested instance may not be inheriting the size of the backing variant and is instead keeping the size of the initial variant. One approach that’s worked for other cases is to use a variable attached to an on-click handler that changes the size instead. One drawback with this method is that it can't animate between states.

Let me know if this moves things closer to the behavior you’re after. Thanks for giving it a try!


Reply