Skip to main content

I have a dropdown button, which I want to change in appearance when pressed. This behavior is universal, so I’ve set it up on the component itself.


image


image


For individual use cases of this dropdown button, I place an instance in my prototype, then create a new frame for the dropdown’s contents. I then add an instance-level interaction to open this frame as an overlay on-click.


image


This tends to work on the first click, though the variant appearance change in the button doesn’t happen. Then in subsequent clicks, the variant appearance changes but the overlay doesn’t open. It’s as if the appearance-changing interaction is blocking the overlay-opening interaction.

Whenever a click trigger opens an overlay, the next click only closes that overlay (assuming you’ve set the overlay to “close when clicking outside”).

This means that the second click cannot trigger the combobox appearance variant back to default because it just closed the overlay. rNotice how the cursor icon changes from a click-finger to an arrow when an overlay is open]


The other option is to make a new component out of the combobox instance that shows/hides the dropdown options.

Terms & ConditionsCookie settings