Hello to everyone! I’d like to ask for help in order to manage a nested instance in one of my components.
I’m designing a new property with variables in which a component like an action-button, an icon-button, or an input-select can show a nested dropdown instead of putting the dropdown in my screens with absolute position.
The property is simple, just a boolean applied to a nested dropdown in my components:
The situation showed in these 2 screenshots is the best that I came up with and solve the majority of situations. However, what happens when a nested dropdown is set to visible in a select is that the dropdown does not follow the width of the parent component:
This happens because the nested dropdown has an absolute position due to the alignment that has to respect. Of course on developer side this issue does not exist, but is still present in Figma.
So the question is → Is there a solution for my problem? How could I address this and fix the building of this components?
Thanks for every feedback, is appreciated.
Ok I wore the “I’ll solve this by my own” hat and this is the solution I came up with 
What you want to achieve is a parent container that has a “hug” setting for height, the width is not important for this case but we are talking about input components that usually have the width set as “fill” or “fixed”.
Let’s have a look at the screenshot below. We have the parent container which is the input itself, and a second container (named input container) with a fixed height:
The input container must have a fixed height (in my case is 36px), and inside this container we’ll have a second one with text and icons, and the dropdown. It’s important to set the “clip content” option as false:
At this point, the last child container will have width = fill, height = fixed and clip content = true, It must have a filled background too in order to set the drop shadow effect if needed:
By following this procedure you’ll be able to have components like this input select with a boolean property for a dropdown, without collapsing the screen of your product. Of course in case of documentation, developers will be like to proceed in a different way to build this but should not be a big concern.
