Copy link to clipboard
Copied
Hi All,
I built a dropdown. When an item is selected, I am using a link on the selected item to have it appear as the selected item in the dropdown. Simple.
My challenge, I want this link do two things. 1) Select the item so it appears as selected (current) and 2) and change the state of the parent control that will turn on the associated form fields.
It seems like my dropdown (which is the child of another component which houses associated form fields that appear depending on the item selected in the dropdown) cannot see the parent states.
Is anyone aware of a method of accomplishing this? I am so close with this really cool design.
Thank you.
1 Correct answer
Hi Julie! Are we talking about a mobile app or a desktop prototype? The 'hover' state won't work on a phone. If that's the case, you can do the following:
1. Add another state on the parent component, which will handle the transition phase. Let's call it "Default Transition".
2. On your Default Multi state, where the child component is, wrap the child component in a group as the example above, and then add a tap interaction to the group pointing to the "Default Transition" state of the parent.
Copy link to clipboard
Copied
Hey there, you can put the nested component in a group, and add the link to the master's state to that group instead.
Copy link to clipboard
Copied
Thank you for your response Spas K.
My nested component is a dropdown though and I think I need it to be a component because I have different states (selected, etc.), that represent how a typical dropdown would work. When one of the items is clicked I want the applicable form fields to appear.
Am I misunderstanding?
Thank you.
Copy link to clipboard
Copied
Hey, it's a bit confusing 🙂 It will stay a component. Just put it in a group on it's own. Then add the trigger to the group.
(State2 on the right is the master's state, not the nested's)
Copy link to clipboard
Copied
Hi there, I've attempted to use this solution. I have a component inside a component. The child component has two states (Default, Tapped). The parent has several, but the two that are relevant are "Default" and "Default Multi." The child component exists on Default Multi. Ideally, I would like to have the child component change to tapped, pause briefly and THEN have the state of the parent model change to Default. But I can't even get two different interactions to work (Hover on the component, Tap on the group), and you can't reach the child component states from the group.
Copy link to clipboard
Copied
Hi Julie! Are we talking about a mobile app or a desktop prototype? The 'hover' state won't work on a phone. If that's the case, you can do the following:
1. Add another state on the parent component, which will handle the transition phase. Let's call it "Default Transition".
2. On your Default Multi state, where the child component is, wrap the child component in a group as the example above, and then add a tap interaction to the group pointing to the "Default Transition" state of the parent.
3. On the "Default Transition" state, change the child component to it's active / tapped state. Then you need to use a little hack, to transition to the Default state after a delay, using an empty lottie file as a time-trigger. I've described how to do it in this thread.
Now when you tap on the child component's group, you will change the parent's state to Default Transition, which should look the same, but the child component here is in "active" state, and after a second or whatever you set as the delay, the lottie End of playback trigger will switch the parent to the Default state.
Sorry there's no simple solution, but there are no time triggers for components, and since we can't control one component with another, we're stuck to such hacks and workarounds 🙂
![](/skins/images/C53DFF7C68EB3B6D15097073366C2F7F/responsive_peak/images/icon_anonymous_message.png)
![](/skins/images/C53DFF7C68EB3B6D15097073366C2F7F/responsive_peak/images/icon_anonymous_message.png)