Nested component preview erratic

[carolineh76238118]

I have a nested component menu. On the first preview the hover state activates both the main component and the nested component. After that it works as expected. This is just one section of a much large nav menu. Link 

https://xd.adobe.com/view/02747694-00af-41e3-b5bb-3c5a89ca64a2-5727/

Video of preview attached.
Also why is the preview so jittery?

Thanks.

[AkinGn]

Hi @carolineh76238118, that's interesting, as I see you pasted the component to an empty test file, would be great if I have it to test myself, maybe I find out some solution to suggest. Happy designing!

[carolineh76238118]

Thanks. Here you go! It's attached.

[AkinGn]

Hi @carolineh76238118, I can't see the file attached, could you please attach it again or maybe upload somewhere via Google drive, dropbox etc and share the link? 

[carolineh76238118]

Akin-Here is a Dropbox link. Thanks again!

https://www.dropbox.com/s/puiofhoc8m2brrn/test.xd?dl=0

[carolineh76238118]

I just replace the link with this one

https://www.dropbox.com/scl/fo/hcgu2f65gu9yhwya4w3p9/h?dl=0&rlkey=tu89ujvhp713v6ma6abve5ois
There is an additional file and video showing multiple components with a toggle button. The toggle to default setting on the lower right component doesn't seem to save and activates the on-off toggle button (top tight) instead. The third component bottom right does not work as anticipated...

[AkinGn]

Thanks for the file and the update Caroline, going to check and share if I find anything useful!

[AkinGn]

If I'm not missing something, I think I resolved the issues, it's about missing interactions that affect toggle states of the nested component, I tried to explain in videos (sorry for the bad audio 😅) :
https://www.youtube.com/watch?v=Fvl7i3HA4sg
https://youtu.be/QRjIE84KxmY

And the files are here: https://www.dropbox.com/sh/vs3ld2pmqiut778/AADcnSmz_Li9RHFvtj_czk8_a?dl=0 Let me know if you have any other questions or need any updates!

[carolineh76238118]

Thanks Akin- You have identified the exact issue, except every time I set the transition from the toggle back to the default it will not stay saved! That is also demonstrated in the second video I provided. Could my file be corrupted?

[carolineh76238118]

Please also see file "Test 2.xd" in the same dropbox. How do I build the next component level where only a single tab may be highlighted at a time, and still retain the original component interaction of default, hover, and toggle for each one? Appreciate your time:)

[AkinGn]

"Thanks Akin- You have identified the exact issue, except every time I set the transition from the toggle back to the default it will not stay saved! That is also demonstrated in the second video I provided. Could my file be corrupted?" Oh yes, there must be something with the file as it works in the one I did, good call. I'll check the issue about your other question about Test 2, I'll share if I have any idea to do so 😉

Edit: Oh I see what you mean, I can do that only via keeping each tab as an element, not a component (and making the whole tabs bar and content area a big component), if you come up with any better solution, feel free to share 😉 It's going to be again a shameless plug but I'll share a video tutorial I did on my little channel lol (I try to also keep my scrrencasts as unlisted videos there to save space on my dropbox also 🙂) If you haven't tried this solution, this should give you the idea: https://www.youtube.com/watch?v=MWr4xgvQx18  (Also the practice file's link is included at the description there)  Hope this helps!

[carolineh76238118]

Hi Akin- I watched the video and downloaded your file but none of the interactions saved. (see photo attached) There is a new file from me attached called Test 4. It has more states but I can only make it work if the toggle states appear in order, from left to right. I don't know how to create functionality to toggle freely in any random order with more elements. Additionally I added hover states to each which broke everything. So am I right in assuming that a hover will not work in this situation? Any additional suggestions? Thanks again!

[carolineh76238118]

Test 4

[carolineh76238118]

I am having trouble uploading the XD file. here is a dropbox link:

https://www.dropbox.com/s/6jnnvx8kqkff72x/Test%204.xd?dl=0

[AkinGn]

Hi @carolineh76238118, I think in order to all interactions to work in any order, you need to define the interactions in every state (like I explained in the video, I defined the interactions for middle and right in the left state, defined for the other two in each state) Don't know if that's the situation or the structure is similar to what I'm talking since I haven't got a chance to examine your latest file yet, but if I find anything going to let you know.

Edit: Yes, I checked your file and the issue is, you need to define all tab interactions in each state, in order to make it work for any tap/click combination. You also need to remember to set their toggling back to their default states (for example when "Edition" is active, once I click "edition" it needs to go back to its default state etc) I did for some tabs so adding the edited file to give you an idea: https://www.dropbox.com/s/bhg7nyxu4fq1w44/Test%204-edited.xd?dl=0
Hope this helps!